javascript - Ember.js - 组件内部模型

Question

我正在制作一个应用程序只是为了练习，我对组件的函数“didReceiveAttr”有疑问。当我在模板中传递模型，然后删除其中的某些元素时，该函数不起作用，但如果我在模板中传递“model.length”，然后删除某些元素，则该函数起作用!

我的组件模板

<h1>Tasks ({{totalTask}})</h1>

我的组件 JS

  totalTask: null,

  didReceiveAttrs(){
    this._super(...arguments);
    this.set('totalTask', this.get('model.length'));
    console.log(this.get('model'));
  }

我的主要模板

{{task-list model=model}}

或

{{task-list model=model.length}}

Answer 1

这确实是预期的行为；看看Ember guide关于 didReceiveAttrs 的工作原理。明确指出“每次更新组件的属性时都会调用didReceiveAttrs钩子(Hook)”。当您添加到数组或从数组中删除时，数组本身不会改变；因此 didReceiveAttrs 不会被执行。它仅在执行对 model 的初始分配时执行。

我准备了这个twiddle向您展示处理此案例的更好的 ember 方法。您应该尽可能依赖计算属性；因此，我将 compulatedTotalTask​​ 作为计算属性添加到 my-component.js 中，如您所见，它依赖于 model.length。