我正在尝试在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”);例如 – 没有任何改变.
如果我使用其他标准车把语句,如IF或UNLESS – 内容会根据我更新模型属性的时间而变化.
显然我正在做一些令人难以置信的错误,并希望得到任何帮助.
解决方法
最简单的方法是使父视图具有绑定到控制器值的属性,以及具有指定为属性的状态名称的子视图.然后,您可以定义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/