EmberJS: Объекты недвижимости в ArrayController?

Question

это, вероятно, очень простой вопрос, чтобы ответить, поэтому я извиняюсь, если я захламляю этот форум заранее.

Я показываю список предметов, которые используют одну и ту же модель и контроллер. Я сделал эти элементы редактируемыми через <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? Если да, то как мне обойти это? Я не хочу помещать это в модель, потому что это чисто дисплейная штука, хотя я знаю, что могу заставить ее работать над этим.

Благодаря :)

Answer 1

По умолчанию поиск контроллера внутри {{#each}} блока будет контроллер шаблона, где {{#each}} был использован. Если каждый элемент должен быть представлен пользовательским контроллером (например, для его собственного состояния), вы можете предоставить опцию itemController, которая ссылается на контроллер по имени поиска. Каждый элемент в цикле будет затем завернут в экземпляр этого контроллера, и сам элемент будет настроен на свойство содержимого этого контроллера.

Итак, предположим, что вы показываете список предметов, используя вспомогательный помощник {{#each}}. Поэтому вы можете указать itemController в помощнике {{#each}} для хранения состояния isEditable по каждой позиции. Это будет выглядеть примерно так:

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

Кроме того, вы должны определить определенные itemController типа Ember.ObjectController как:

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

И для списка вы должны затем иметь App.ItemsController типа Ember.ArrayController:

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

Дополнительную информацию о данном товаре см. В разделе Поддержка контроллеров для {{#each}}: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each

Надеюсь, что это поможет.