EmberJS：ArrayController中的屬性範圍？

這可能是一個非常簡單的問題，所以我很抱歉，如果我提前討論這個論壇。EmberJS：ArrayController中的屬性範圍？

我顯示共享相同的模型和控制器的項目清單。我通過每個項目旁邊的<button {{ action 'edit' }}>可以編輯這些項目，這些項目切換控制器中屬性「isEditable」的布爾值。但是，單擊此按鈕將導致列表中的所有項目都可編輯，因爲它們全部共享控制器屬性「isEditable」。期望的效果是一次只能編輯一個項目，而不是一次編輯所有項目。

我的模板的一個簡化版本是這樣的：

{{#if isEditing}} 
     <p>{{input type="text" value=title}}</p> 
     <button {{action 'doneEditing'}}>Done</button> 
{{else}} 
     <span class="title">{{title}}</span> 
     <button {{action 'edit'}}><span class="edit"</span></button> 
{{/if}}

和控制器看起來像這樣

App.ItemController = Ember.ArrayController.extend({ 
isEditing : false, 
actions : { 
    edit : function(){ 
     this.set('isEditing', true); 
    }, 
    doneEditing : function(){ 
     this.set('isEditing', false); 
    }, 
}

}）;

任何人都知道如何做到這一點？是否因爲每個項目共享「isEditable」屬性？如果是這樣，我該如何解決這個問題？我不想把它放到模型中，因爲它純粹是一種展示的東西，即使我知道我可以做到這一點。

謝謝:)

來源

2013-09-21 DeliciousMe

缺省情況下一個{{#each}}塊內的控制器查找將其中使用{{#each}}模板的控制器。如果每個項目都需要通過自定義控制器來呈現（例如，保存自己的狀態），則可以提供itemController選項，該選項通過查找名稱引用控制器。循環中的每個項目將被包裝在此控制器的實例中，並且項目本身將被設置爲該控制器的內容屬性。

所以，我假設你正在顯示使用{{#each}}助手的項目清單。因此，您可以在{{#each}}幫助程序中指定itemController以保留每個項目的isEditable狀態。這將是這個樣子：

{{#each item in controller itemController="item"}} 
    ... 
{{/each}}

而且你應該定義這樣定義Ember.ObjectController型itemController：

App.ItemController = Ember.ObjectController.extend({ 
    isEditing : false, 
    actions : { 
    edit : function(){ 
     this.set('isEditing', true); 
    }, 
    doneEditing : function(){ 
     this.set('isEditing', false); 
    }, 
    } 
});

而對於列表，你應該再有Ember.ArrayController類型的App.ItemsController：

App.ItemsController = Ember.ArrayController.extend({});

看到這裏就爲提到itemController支持更多信息210幫手：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each

希望它幫助。

來源

2013-09-21 23:13:58 intuitivepixel

繁榮。謝謝你如此簡潔地回答我的問題。巨大的幫助。巨大的成功！ – DeliciousMe

EmberJS：ArrayController中的屬性範圍？

回答

相關問題