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） - 內容會根據我何時更新模型屬性而發生變化。

顯然我做了一些令人難以置信的錯誤，並希望得到任何幫助。

來源

2011-12-21 Jamsi

我相信你應該使用'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/

來源

2011-12-31 09:51:02 ebryn

Ember.js +把手自定義幫手

回答

相關問題