Ember.js + Handlebars定制助手

时间:2011-12-21 10:02:50

标签: ruby-on-rails ember.js handlebars.js

我试图在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(&#34; state&#34;,&#34; test2&#34;);例如 - 没有任何改变。

如果我使用IF或UNLESS等其他标准手柄语句 - 内容会根据我更新模型属性的时间而变化。

显然,我做了一些令人难以置信的错误,并希望得到任何帮助。

1 个答案:

答案 0 :(得分:5)

最简单的方法是让父视图具有绑定到控制器值的属性,以及具有指定为属性的状态名称的子视图。然后,您可以定义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/