Skip to content

Instantly share code, notes, and snippets.

@bsara

bsara/Emberjs-ExtendedTextField.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bsara/9797054 to your computer and use it in GitHub Desktop.
Save bsara/9797054 to your computer and use it in GitHub Desktop.
Download ZIP
An extended version of the Ember.TextField component. Extended features include: onClick Actions, and auto focus on page load.
Raw
Emberjs-ExtendedTextField.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ember.js - Extended Text Field</title>
<script type='text/javascript' src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.2.1/handlebars.min.js"></script>
<script type='text/javascript' src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.4.0/ember.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://necolas.github.io/normalize.css/3.0.0/normalize.css">
<style type='text/css'>
body {
margin: 20px
}
div {
margin-bottom: 50px
}
</style>
<script type='text/javascript'>
//<![CDATA[
window.onload=function(){
var App = Ember.Application.create();
App.InputTextComponent = Ember.TextField.extend({
becomeFocused: (function() {
var doFocus;
doFocus = this.get("doFocus");
if ((doFocus !== null ? doFocus.trim() : void 0) === "true") {
return this.$().focus();
}
}).on("didInsertElement"),
click: function() {
var clickAction;
clickAction = this.get("clickAction");
if (clickAction !== null ? clickAction.trim() : void 0) {
// NOTE: To get the action to execute, use the commented code on the next line.
// this.sendAction("clickAction")
return alert("Action sent: " + clickAction);
}
}
});
}
//]]>
</script>
</head>
<body>
<script type="text/x-handlebars">
<div>
<h2>Ember.js - Clickable Text Field</h2>
{{input-text clickAction="myAction" doFocus="true" placeholder="Click Me!!!"}}
</div>
<div>
<h2>Ember.js - Auto Focus Text Field</h2>
{{input-text doFocus="true" placeholder="Focus here on load"}}
</div>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment