Ember.js - Extended Text Field Component

An extended version of the Ember.TextField component. Extended features include: onClick Actions, and auto focus on page load.

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.2.1/handlebars.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.4.0/ember.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.0/normalize.css">
<script type="text/x-handlebars">
  <div>
    <h2>Ember.js - Clickable Text Field</h2>
    {{input-text clickAction="myAction" doFocus="false" placeholder="Click Me!!!"}}
  </div>
  <div>
    <h2>Ember.js - Auto Focus Text Field</h2>
    {{input-text doFocus="true" placeholder="Focus here on load"}}
  </div>
</script>

SCSS

body {
    margin: 20px
}

div {
    margin-bottom: 50px
}

JavaScript

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);
    }
  }
});