EMBER WORKSHOP: Handlebars Custom View Helpers

Handlebars Custom View Helpers

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <p>{{input key-press="inputKeyPress"}}</p>
    
    <p>{{custom-input}}</p>
    
    <p>{{custom-input key-up="customInputKeyUp" key-down="customInputKeyDown"}}</p>
    
</script>

<!-- CUSTOM INPUT -->

<!-- keyDown event defined on TextField -->

<!-- sendAction to a action(handler) defined on the controller -->

<!-- the link is set on the input field in the template-->

CSS

p { padding: 15px}

JavaScript

App = Ember.Application.create({});

App.IndexController = Ember.Controller.extend({
    actions: {
        inputKeyPress: function(t){
          console.log('input-key-press'+t);
        },
        customInputKeyUp: function(){
          console.log('custom-input-key-up');
        },
        customInputKeyDown: function(){
          console.log('custom-input-key-down');
        }
    } 
});

var customInput = Ember.TextField.extend({
    
    keyDown : function (event) {
        this.sendAction('key-down', this, event);
        //CAN'T send the action straight to the controller
        //this.sendAction('customInputKeyDown', this, event);
    },
    keyUp : function (event) {
        this.sendAction('key-up', this, event);
        //CAN'T send the action straight to the controller
        //this.sendAction('customInputKeyUp');
        //this.sendAction('customInputKeyUp', this, event);
    } 
    
}); 

Ember.Handlebars.helper('custom-input', customInput);