如何为Handlebar的模板创建动作助手?

时间:2015-05-26 15:12:21

标签: javascript jquery handlebars.js

我有一个模板

    <div class="message">
        <div class="quote"><div class="tail"></div>{{prompt}}</div>
        <textarea name="message" placeholder="Your question"></textarea>
        <button name="ask" value="ask">Ask</button>
    </div>

我想像<button name="ask" value="ask" {{action askAction on="click"}}>Ask</button>

那样做帮手

这个助手创建了jQuery事件处理程序,如:

jQuery("button[name=ask]").click(function(){
    App.askAction();
})

我想在我的html上进行抽象,除了jQuery和Handlebars之外我不想使用任何东西。

1 个答案:

答案 0 :(得分:0)

我发现了http://jsfiddle.net/ebryn/cCRck/

Ember.Handlebars.registerHelper('action', function(actionName, options) {
  var hash = options.hash || {},
      actionId = ++jQuery.uuid,
      eventName = options.hash.on || "click",
      // Do we need to worry about the specified target changing?
      target = options.hash.target ? Ember.getPath(options.hash.target) : this, 
      ret = [];

  var handler = registeredActions[actionId] = function(event) {
    target[actionName](event);
  };

  // FIXME: Use App's rootElement
  $(document.body).delegate('[data-ember-action=' + actionId + ']', eventName, handler);

  ret.push('data-ember-action="' + actionId + '"');
  return new Ember.Handlebars.SafeString(ret.join(' '));
});

并定制了一点