Ember.js - 模型内部组件

Question

我正在制作一个仅用于练习的应用程序，我对组件的功能“didReceiveAttr”有疑问。 当我在我的模板中传递我的MODEL然后我擦除其中的一些元素时，该函数不起作用，但如果我在模板中传递“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指南 ，了解didReceiveAttrs是如何工作的。 明确指出“每次更新组件的属性时都会调用didReceiveAttrs钩子”。 当您添加到数组或从数组中删除时，数组本身不会更改; 因此didReceiveAttrs没有被执行。 它仅在执行model的初始分配时执行。

我准备了这个旋风，以说明你处理这种情况的更好的余烬方式。 你应该尽可能多地依赖计算属性; 因此，我将computedTotalTask作为计算属性添加到my-component.js ，它依赖于model.length如您所见。

Answer 2

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

在这里，您将model.length指定为modelLength属性到组件。 所以最初didReceiveAttrs会组件接收被称为modelLength属性，当你添加更多的元素，然后模型modelLength属性本身更改，因此这将调用didReceiveAttrs前重新呈现。

{{task-list modelTaskList=model}}

这里modelTask​​List指向数组，所以当你通过KVO兼容方法（如pushObject）添加/删除项时，它也会反映在组件中。 但是modelTask​​List仍然指向同一个数组，因此不会调用didReceiveAttrs钩子。 假设您分配了不同的数组，那么您可以看到调用didReceiveAttrs。

Answer 3

您始终可以将其设置为计算属性，以确保在更新绑定变量时更新。

在组件中，设置一个计算属性，该属性将监视模型的更改，然后使用更改更新变量modelLength

modelLength: Ember.computed('model', function(){
  return this.get('model').length;
}

然后，在您的车把模板中，引用此长度

<h1>Tasks{{#if modelLength}} ({{modelLength}}){{/if}}</h1>