Ember JS: вычисленная информация о свойствах зависимых ключей - PullRequest
Новая
       5

Ember JS: вычисленная информация о свойствах зависимых ключей

1 голос
/ 06 февраля 2020

Предположим, у меня есть объект с такой структурой: { filters: [{ params: { value: ["abc"] }] }.

Как мне написать вычисляемое свойство, которое знает об изменениях в свойстве value? Например, допустим, мы берем один из фильтров и делаем set(filter, 'params.value', ["abc", "123"]). Я пытался с computed('filters.@each.params.value.[]', ...), но он не работает

1 Ответ

1 голос
/ 18 февраля 2020

Хорошо, наверное, я знаю, как вам помочь. Прежде всего, кажется невозможным иметь вычисляемое свойство с глубоко вложенными ключами после @each. Вот почему, чтобы сделать эту работу, нужно разделить ее. Примерно так: 

export default Component.extend({
  init() {
    this._super(...arguments);

    this.o = {filters: [{params: {value: ["abc"]}}]};
  },

  params: computed('o.filters.@each.params', function () {
    return this.o.filters.mapBy('params');
  }),

  paramsValue: computed('params.@each.value', function () {
    let aaa = this.params; // it seems like we need to reference the params anyhow
    return JSON.stringify(this.o);
  }),

  @action
  changeClassic() {
    let filter = this.o.filters[0];
    set(filter, 'params.value', ['abc', '123']);
  }

});

Я также пытался решить ту же проблему в случае компонента мерцания с @tracked. Там мне пришлось использовать отдельный класс и сделать отслеживаемое поле value: 

class ValueHandler {
  @tracked value;

  constructor(value) {
    this.value = value;
  }
}

export default class DeepObjectTestComponent extends Component {

  @tracked o = {filters: [{params: new ValueHandler('abc')}]};

  // so here I don't need an intermediate computed (hope this works for a more complicated  scenario
  get paramsValue() {
    let aaa = this.o.filters[0].params.value;
    return JSON.stringify(this.o);
  }

  @action
  changeGlimmer() {
    let filter = this.o.filters[0];
    // set(filter, 'params.value', ['abc', '123']);
    filter.params.value = ['abc', '123'];
  }
}
...