Элемент переключателя Ember в массиве

Question

Что такое Ember способ сделать следующее?

App.IndexController = Ember.Controller.extend({ 
    actions: { 
    change: function(){ 
     var model = this.get('model'); 
     model[0] = true; 
     this.set('model', model); 
    } 
    } 
}); 

Я хочу переключить элемент (индекс 0 в этом примере) в модели.

Адрес jsbin: http://emberjs.jsbin.com/doyejipagu/1/edit. Изменение модели не отражается.

Answer 1

Решение использовать replace изменить массив:

change: function(){ 
    this.get('model').replace(0, 1, [true]); 
} 

См http://emberjs.com/api/classes/Ember.MutableArray.html#method_replace. Вышеупомянутое означает «начиная с позиции 0, заменить 1 элемент, на один элемент true». replace уведомляет Ember о том, что содержимое массива изменилось, поэтому оно отражается повсюду.

Было бы неплохо, если бы был API replaceAt, что позволило нам просто сказать model.replaceAt(0, true), но нет. Конечно, вы можете написать свой собственный:

Ember.MutableArray.reopen({ 
    replaceAt: function(pos, val) { 
    return this.replace(pos, 1, [val]); 
    } 
}); 

Проблема с кодом, что ничто не предупреждает Ember о том, что внутренние значения модели изменились. model[0] = true ничего не запускает. Ваш this.set('model', model) не изменяет значение самого объекта model; поэтому он не вызывает никаких наблюдателей или привязок.

Вы также можете создать новый массив (здесь с помощью slice), которая будет работать:

var model = this.get('model').slice(); 
model[0] = true; 
this.set('model', model); 

Теперь Ember видит, что model изменилось, и делает всю свою магию.

Answer 2

Что вы пытаетесь сделать, невозможно. Модель должна быть объектом или массивом объектов, иначе вы не можете установить на ней свойства.

Таким образом, вы могли бы сделать, например:

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
     return [ 
      Ember.Object.create({value: false}), 
      Ember.Object.create({value: true}), 
      Ember.Object.create({value: false}) 
     ]; 
    } 
}); 

App.IndexController = Ember.Controller.extend({ 
    actions: { 
     change: function(){ 
      this.get('model')[0].toggleProperty('value'); 
     } 
    } 
});