Ember.js +把手定制助手
我试图在Handlebars中实现一个基于我的控制器中的属性进行更改的简单条件语句。
我设法想出了;
Handlebars.registerHelper("businessVerificationState", function(state, block) {
var value = Ember.getPath(this, "state");
if (value == state) {
return block(this);
}
});
App.businessController.business指的是我创建的模型对象，“状态”是一个属性。 以下是模板。
<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/
链接地址: http://www.djcxy.com/p/61579.html