根據Ember.js中的模型狀態切換視圖模板

我在我的Ember.js應用程序中有一個通知框，它將根據狀態模型的值更改文本，樣式和按鈕。 如何僅切換通知框的視圖（或模板）？我不想transitionTo，因爲頁面的其餘部分不應該更新，只是通知框。根據Ember.js中的模型狀態切換視圖模板

我有一個JSFiddle with a complete example。但是這裏有相關的部分可以看一下：

主模板將呈現通知欄（「statusState」）和常規視圖數據。

<script type="text/x-handlebars" data-template-name="status"> 
    {{render "statusState" content}} 
    <p> 
    Other information not related to the status state, but still related to status goes here. 
    </p> 
    {{outlet}} 
</script>

有每一個狀態狀態的單獨的模板（「待定」，「準備」，「已完成」）：

<script type="text/x-handlebars" data-template-name="status/pending"> 
    <div style="background-color: grey"> 
    The status is pending. 
    </div> 
</script> 

<script type="text/x-handlebars" data-template-name="status/ready"> 
    <div style="background-color: blue"> 
    The status is ready. 
    </div> 
</script> 

<script type="text/x-handlebars" data-template-name="status/finished"> 
    <div style="background-color: green"> 
    The status is finished. 
    </div> 
</script>

的狀態對象是沒有什麼特別的，並且屬於StatusController：

App.StatusRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Status.create(); 
    } 
}); 

App.Status = Ember.Object.extend({ 
    value: 0 
});

我的第一次嘗試是每當狀態的值發生變化時都更改視圖的templateName。但是，這感覺哈克，甚至似乎沒有以狀態值的變化做出反應：

App.StatusStateView = Ember.View.extend({ 
    templateName: function() { 
    var templateName = 'status/pending'; 
    var value = this.get('controller.model.value'); 
    if (value === 1) { 
     templateName = 'status/ready'; 
    } 
    else if (value === 2) { 
     templateName = 'status/finished'; 
    } 
    return templateName; 
    }.property('controller.model.value') 
});

總之，我將如何改變視圖或模板的基礎上有更多的模型值的頁面的只是一部分比2個選擇？

來源

2013-04-18 baalexander

可能重複http://stackoverflow.com/questions/13979729/ember-view-template- as-a-computed-property） – MilkyWayJoe

這個技巧是在鏈接的例子中調用'rerender'。這有幫助嗎？ – WiredPrairie

@MilkyWayJoe - 感謝您的鏈接。我將使用templateNameBinding和重新渲染來解決您的解決方案。 – baalexander

下面是我將如何處理這個問題。將布爾計算屬性添加到模型或控制器，並使用帶有{{#if}}幫助程序的單個模板。例如

App.Status = Ember.Object.extend({ 
    value: 0, 
    ready: function(){ 
    return this.get('value') === 1; 
    }.property('value'), 
    finished: function(){ 
    return this.get('value') === 2; 
    }.property('value'), 
    pending: function(){ 
    var value = this.get('value'); 
    return value !== 1 && value !== 2; 
    }.property('value') 
});

，並在單個模板：

{{#if pending}} 
    I'm pending 
{{/if}} 
{{#if ready}} 
    I'm ready! 
{{/if}} 
{{#if finished}} 
    I'm finished. 
{{/if}}

[作爲計算的屬性灰燼視圖模板（的

來源

2013-04-19 12:48:39

我喜歡將每個狀態轉換爲布爾值，但我希望避免單個模板路由的主要原因是每個狀態都會有相當數量的HTML，我不想混淆模板。雖然我可以稱之爲偏... – baalexander

根據Ember.js中的模型狀態切換視圖模板

回答

相關問題