Ember.js +把手自定义帮手

问题描述：

我试图在Handlebars中实现一个简单的条件语句，该语句根据我的控制器中的属性进行更改。Ember.js +把手自定义帮手

我设法想出了;

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） - 内容会根据我何时更新模型属性而发生变化。

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

我相信你应该使用'Ember.Handlebars。 registerHelper'。 – 2014-02-19 16:09:17

答

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

Ember.js +把手自定义帮手

相关推荐