Ember.js + Handlebars自定义助手

Question

我想在Handlebars中实现一个简单的条件语句，它基于控制器中的属性进行变化。

我已经想出如下方案;

Handlebars.registerHelper("businessVerificationState", function(state, block) {
  var value = Ember.getPath(this, "state");
  if (value == state) {
    return block(this);
  }
});

App.businessController.business是我创建的一个模型对象，"state"是一个属性。以下是该模板。

<script type="text/x-handlebars">
  {{#with App.businessController.business}}
    {{#exampleState "test1"}}
      <p>Test 1</p>
    {{/exampleState}}

    {{#exampleState "test2"}}
      <p>Test 2</p>
    {{/exampleState}}
 </script>

这一切都非常好，除了当我的模型属性改变时。从Webkit控制台中，如果我输入…

business.set("state", "test2"); 例如- 没有任何变化。

如果我使用其他标准的Handlebar语句，比如IF或者UNLESS，那么内容就会根据我更新的模型属性而改变。

显然我做错了什么，需要任何帮助。

- James

---

我认为你应该使用Ember.Handlebars.registerHelper。 - Peter Wagenet

Answer 1

最简单的方法是创建一个父视图，将其属性绑定到控制器的值，并将子视图的状态名称指定为属性。然后，您可以定义一个 isVisible 计算属性，它将根据与父视图绑定的当前值匹配与否自动切换子视图的可见性。

您的模板可能如下所示：

<script type="text/x-handlebars">
  {{#view Ember.View currentStateBinding="App.businessController.business.state"}}
    {{#view App.StateView stateName="test1"}}
      <p>Test 1</p>
    {{/view}}

    {{#view App.StateView stateName="test2"}}
      <p>Test 2</p>
    {{/view}}
  {{/view}}
</script>

你的JS代码：

var App = Ember.Application.create();

App.businessController = Ember.Object.create({
    business: Ember.Object.create({
        state: 'test1'
    })
});

App.StateView = Ember.View.extend({
    isVisible: function() {
        return this.get('stateName') === this.getPath('parentView.currentState');
    }.property('parentView.currentState')
});

这是一个可用的jsFiddle示例： http://jsfiddle.net/ebryn/QAxPU/

- ebryn