Emberjs 对象在计算排序后失去其属性答案

【问题标题】：Emberjs object loses its property after computed sortEmberjs 对象在计算排序后失去其属性
【发布时间】：2015-04-21 18:37:49
【问题描述】：

我有一个表格组件，它接收我称之为内容的模型。

{{my-table content=model }}

此模型被分类为计算属性 (CP)。

multiSort: Ember.computed.sort('content','sortProperitsWithOrders')

我遍历multiSort 并将每一行传递给a 行组件

  {{#each row in multiSort}} 
    {{my-table-row row=row columns=columns}}
  {{/each}}

在每一行中，我都有一个复选框组件。如果它发生变化，则将一个操作发送到其父组件（行组件）。从行开始，我将操作进一步发送到表格组件（向上操作），在此我切换行的活动属性。

问题：在我使用 sort 之后，row 失去了它的 active 属性，并且复选框未被选中。选中一个复选框，然后点击列的标题。

我认为Ember.compute.sort 会根据sortProperitsWithOrders 获取内容并重新排列它。因此，如果我在内容项目之一上设置active 属性，那么我将在multiSort CP 中拥有它。从multiSort 会向下传递到行组件，从行到复选框（数据向下）。

JsBin: http://jsbin.com/mojuquhawo/1/edit?html,js,output

【问题讨论】：

你能创建一个没有这么多列和未使用组件的简单 jsbin。
@kushdilip 我还在调试中。看起来问题出在复选框组件上：如果它重新渲染，它的状态不会反映基于行的活动属性的选中属性。该行不会丢失该属性。一切都按我的预期工作，只是复选框在重新渲染后失去了状态。我正在重写复选框组件。那么它应该可以工作了。

标签： ember.js

【解决方案1】：

您会发现每次排序时都会为每一行创建一个MyTableRowComponent 的新实例。发生这种情况时，active 属性（源自MyTableRowComponent）设置为其初始值false。

请参阅示例 JSBin，其中显示了在每个排序上创建的新组件 - 查看控制台日志记录。

您需要在某个地方存储 active 属性的持久性 - Customer 模型似乎是最合适的位置。

我还注意到MyCheckboxComponent 不是从Ember.Checkbox 扩展而来——而是使用Ember.Component——这也可能会导致问题。

【讨论】：