Под капотом 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 изменилось, и соответствующим образом обновит шаблон.