Ember Handlebars 助手视图未更新答案

【问题标题】：Ember Handlebars helper view not updatedEmber Handlebars 助手视图未更新
【发布时间】：2012-09-26 11:30:35
【问题描述】：

我正在尝试使用 Handlebars 助手，但助手视图没有更新。

景色，

<script type="text/x-handlebars">
  {{#view App.NumberView}}
    <button {{action changeNumber}}>Change number</button><br>
    {{formatNumber view.number}} <br>
    {{view.number}}
  {{/view}}
</script>

代码，

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

App.NumberView = Ember.View.extend({
  number: 5,
  changeNumber: function(e) {
    this.set('number', this.get('number') + 1);
  }    
});

Em.Handlebars.registerHelper('formatNumber', function(timePath, options) {
  var number = Em.Handlebars.getPath(this, timePath, options);
  return new Handlebars.SafeString("Formated number: " + number);
});

jsfiddle中的实例http://jsfiddle.net/LP7Hz/1/

那怎么了？

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

因为 Ember 中的 Handlebars 助手不是绑定助手。所以你可以像这个小提琴一样实例化一个辅助视图：

http://jsfiddle.net/secretlm/qfNJw/2/

HTML：

<script type="text/x-handlebars">
    {{#view App.NumberView}}
        <button {{action changeNumber}}>Change number</button><br>
        {{formatNumber view.number}} <br>
        {{view.number}}
    {{/view}}
</script>

Javascript：

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

App.NumberView = Ember.View.extend({
    number: 5,
    changeNumber: function(e) {
        this.set('number', this.get('number') + 1);
    }    
});


App.registerViewHelper = function(name, view) {
  Ember.Handlebars.registerHelper(name, function(property, options) {
    options.hash.contentBinding = property;
    return Ember.Handlebars.helpers.view.call(this, view, options);
  });
};


inlineFormatter = function(fn) {
  return Ember.View.extend({
    tagName: 'span',

    template: Ember.Handlebars.compile('{{view.formattedContent}}'),

    formattedContent: (function() {
      if (this.get('content') != null) {
        return fn(this.get('content'));
      }
    }).property('content')
  });
};


App.registerViewHelper('formatNumber', inlineFormatter(function(content) {

    return new Handlebars.SafeString("Formated number: " + content);
}));

此链接很有用：@Jo Liss 的http://techblog.fundinggates.com/blog/2012/08/ember-handlebars-helpers-bound-and-unbound/

【讨论】：

谢谢，这看起来不错。但是我怎样才能获得帮助程序中的选项。我想做{{formatNumber view.number formatOpt="arg"}}之类的事情。我试图将选项传递给 inlineFormatter 但无法使其工作。
使用 {{formatNumber view.number formatOpt="arg"}}，您可以使用 options.hash.formatOpt 来访问它。
我只能在 registerViewHelper 中访问 options.hash，而不能在最终的 helper 方法中访问。检查这个jsfiddle.net/qfNJw/25
这个完全相同的代码不适用于新版本的 Ember (ember-1.0.pre.min.js)。这是一个证明jsfiddle.net/R5CZW/9
您应该在管理资源中将 Handlebars 移到 Emberjs 之前。它会起作用的。

【解决方案2】：

您正在寻找一个绑定助手，但目前还不存在。有一个Pull Request 和相关的讨论。

【讨论】：