Ember.js - 组件内的模型答案

【问题标题】：Ember.js - Model inside componentEmber.js - 组件内的模型
【发布时间】：2017-08-18 03:58:03
【问题描述】：

我正在制作一个应用程序只是为了练习，我对组件的功能“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}}

【问题讨论】：

我猜你的问题是为什么会发生这种情况？我试图在我的回答中解释它。希望这会有所帮助。

标签： javascript ember.js model components

【解决方案1】：

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

我准备了这个twiddle 来向您说明处理此案的更好的 ember 方法。您应该尽可能多地依赖计算属性；因此，我将computedTotalTask 作为计算属性添加到my-component.js，并且它依赖于model.length，如您所见。

【讨论】：

是的，我知道 didReceiveAttrs 仅在进行更新时调用，这就是为什么我感到困惑，因为我认为（删除任务）是对模型长度的更新，因此应该调用功能
对不起，我不明白你在混淆什么。正如我所解释的，官方指南说didReceiveAttrs 仅在更新属性时才会执行。添加/删除数组不会更新数组本身；但是数组的长度会更新。所以;如果您将数组作为属性传递，didReceiveAttrs 将不会在添加/删除项目时触发。如果传递数组的长度；因为添加/删除项目会改变长度； didReceiveAttrs 按预期执行。
感谢您的回复，是的，我现在明白了，问题是我将模型的长度视为属性，当我在模型中删除或添加某些内容时，此属性（长度）已更新，因此必须调用该函数，但我发现它不适合
我很高兴你得到它；不要忘记接受/支持对您有帮助的答案。最好的问候。

【解决方案2】：

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

在这里，您将model.length 作为modelLength 属性分配给组件。所以最初 didReceiveAttrs 将被调用，因为组件正在接收modelLength 属性，当您向模型添加一个更多元素时，modelLength 属性本身发生了变化，因此这将在重新渲染之前调用didReceiveAttrs。

{{task-list modelTaskList=model}}

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

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：