Под капотом Ember преобразует все массивы в объект Ember.Array. Это означает, что есть некоторые вещи, которые мы должны делать по-другому, если мы хотим манипулировать ими. В некоторых случаях мы не можем просто использовать методы для обычного объекта массива JavaScript, и в этом конкретном посте я буду говорить о методе pushObject
и Ember.MutableArray.
KVO-совместимость означает соответствие Key Value Observing. Что это значит? Хорошо подумайте об Ember и о том, как наш шаблон перерисовывается каждый раз, когда одно из свойств нашей модели или контроллера изменяется или наблюдается.
Например, у вас есть массив, который является объектом, и вы добавляете элементы в этот массив, шаблон не будет обновляться новым элементом в вашем массиве. Некоторый код для демонстрации того, что я описываю:
// js let arr = [1] // hbs {{#each arr as |item|}} {{item}} {{/each}} // then we'll update arr arr.push(2) // now arr = [1,2]
При первом отображении шаблона он будет отображать 1
. Но в следующий раз, когда я обновлю arr
, будет ли шаблон повторно отображать arr
после нажатия? Если вы сами попробуете, то увидите, что это не так. Теперь, почему это?
Это связано с тем, что arr
является объектом, а arr
содержит ссылку на этот массив объектов. Поэтому, когда мы нажимаем или манипулируем СОДЕРЖАНИЕМ массива, мы не меняем фактическую ссылку на объект массива с именем arr
.
Здесь нам поможет использование методов Ember.Array. Под капотом метод pushObject
обновляет ссылку на массив и поддерживает правило, совместимое с KVO.
Итак, если бы у нас было это:
// js let arr = [1] // hbs {{#each arr as |item|}} {{item}} {{/each}} // then we'll update arr with the pushObject arr.pushObject(2) // now arr = [1,2]
Шаблон обновится и отобразит 1
и 2
. В качестве альтернативы вы можете создать новый массив и установить этот новый массив как исходный, который у вас был, чтобы обновить шаблон, например:
// js let arr = [1] // hbs {{#each arr as |item|}} {{item}} {{/each}} THEN: // we want to update arr let copy = [1,2] arr = copy
Это эффективно установит новую ссылку на arr
, и Ember сможет определить, что фактическое значение arr
изменилось, и соответствующим образом обновит шаблон.