Блог

Это мой код

 parent.hbs
 
 <ChildComp
   @value={{this.changes}}
 />


parent.js
export class ParentComponet extends Component {
  @tracked this.changes = [1,2,3]
  
  @action addChanges() {
     this.changes = [...this.changes, this.changes.length]
  }
}

child-comp.js
export class ChildComponet extends Component {
   // I wanted to observe this.args.changes updated
   // Based on that I need to call some operation
   get operation() {
      let parent = this.args.values.map((obj) {
            if (obj.parent !== null) {
             set(obj, 'goal', null);
             set(obj, 'newSubGoal', null);
            }
    });
   }
}
 

Я хотел наблюдать за this.args.changes в моем дочернем компоненте. Как я могу это сделать в ember-octane?

Я предполагаю, что вы используете последние функции Octane в своем приложении из фрагмента кода.

Мы можем сделать свойство класса реактивным с помощью @tracked декоратора. Таким образом, когда отслеживаемое значение изменяется в родительском компоненте, то же самое изменение будет распространено во всех местах, где оно используется. В вашем случае вы передали значение в дочерний компонент, и, таким образом, изменения также будут отслеживаться внутри дочернего компонента.

класс родительского компонента:

 export class ParentComponent extends Component {
  @tracked changes = [1,2,3];
  
  @action addChanges() {
     this.changes = [...this.changes, this.changes.length]
  }
}
 

В вашем дочернем компоненте вы можете использовать геттеры для соответствующего пересчета изменений. геттер будет пересчитываться при каждом изменении значения, доступного внутри геттера. Например, из вашего кода, если вам нужно получить сумму массива,

класс дочернего компонента:

 export class ChildComponent extends Component {
   // This getter will be computed every time the `changes` array changes.
   get sum() {
     return this.args.value.reduce((a, b) => a   b, 0);
   }
}
 

дочерний шаблон:

 SUM: {{this.sum}}
 

Редактировать

Если вам нужно запустить произвольную функцию при изменении значения (чаще всего для синхронизации с внешними библиотеками или ручных изменений DOM), вы можете использовать {{did-update}} модификатор ember-render-modifiers