EmberJS, помощники и ComputedProperty

У меня есть Helper, который получает массив элементов и возвращает другой массив на основе первого.

{{#each (sorted-strings myStrings) as |string|}}
  {{string}}
{{/each}}

Реализация Helper может быть примерно такой:

// app/helpers/sorted-strings.js
import Ember from 'ember';

export function sortedStrings(params/*, hash*/) {
  return params[0].sort();
}

export default Ember.Helper.helper(sortedStrings);

Помощник работает нормально, но если изменить исходный массив myString, эти изменения не повлияют на уже отрендеренный список.

Как я могу объединить поведение ComputedProperty и результат Helper?


person fguillen    schedule 14.06.2016    source источник


Ответы (3)


Используйте notifyPropertyChange(), чтобы уведомить помощника об изменении массива. Я думаю, что помощник имеет ссылку на массив и не знает, что его содержимое или длина изменились

Так

actions: {
    add() {
     this.get('myStrings').pushObject('testing');
     this.notifyPropertyChange('myStrings');
    }
  }

Я обновил Twiddle - вот новая ссылка https://ember-twiddle.com/31dfcb7b208eb1348f34d90c98f50bbb?openFiles=controllers.application.js%2C

person David Votrubec    schedule 14.06.2016
comment
Это работает, спасибо. Но это безумие, какой смысл использовать все манипуляторы get и set атрибутов Ember, если в конце я должен сделать явное уведомление об изменении?. В моем случае свойство элемента Array модифицируется помощником {{x-select}}, поэтому мне сложно вызвать метод notifyPropertyChange. - person fguillen; 14.06.2016
comment
У меня есть здесь твиддл, где я использую ArrayProxy и все батарея из set и get, чтобы попытаться заставить Ember сделать неявное уведомление об изменении, но это не сработает, если я прокомментирую явное уведомление :/ - person fguillen; 14.06.2016

После долгих мучений я понял, что правильным решением будет объявить Component вместо Helper. Таким образом, я могу явно объявить вычисляемое свойство, которое отслеживает изменения в массиве myStrings:

// app/components/sorted-strings.js
export default Ember.Component.extend({
  myStrings: null,
  sortedMyStrings: Ember.computed('myStrings', function() {
    return this.get('myStrings').sort();
  });
});

// app/templates/components/sorted-strings.hbs
{{#each sortedMyStrings as |string|}}
  {{string}}
{{/each}}

// template
{{sorted-strings myStrings=myStrings}}
person fguillen    schedule 14.06.2016

Передача вычисляемого свойства помощнику должна работать нормально. Посмотрите этот twiddle.

Возможно, ваше вычисляемое свойство не обновляется должным образом.

person Igor    schedule 14.06.2016