ember.js 每次访问列表模板都会变大

Question

总结

我对 Ember 显示的列表有疑问，每次访问它时都会显示额外的行。额外的行与最初显示的行重复。

详情

在 Emberjs 2.13.0 应用程序中，我有一个如下所示的模型：

从 'ember-data' 导入 DS；

export default DS.Model.extend({
    cceIdentifierParent: DS.attr('string'),
    cchCceIdParent: DS.attr('string'),
    nodeType: DS.attr('number')
});

我有一条路线，'diagcctreetoplevelonly'，看起来像这样：

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.findAll('diagcctreetoplevelonly');
  }
});

还有一个看起来像这样的模板：

{{diag-warningbanner}}
{{#if model.length}}
  <table>
    <thead>
      <tr>
        <th>
            cceIdentifierParent
        </th>
        <th>
            cchCceIdParent
        </th>
        <th>
            nodeType          
        </th>
      </tr>
    </thead>
    <tbody>
        {{#each model as |treenode|}}
           <tr>
              <td>
                {{treenode.cceIdentifierParent}}
              </td>
              <td>
                {{treenode.cchCceIdParent}}
              </td>
              <td>
                {{treenode.nodeType}}
              </td>
            </tr>
        {{/each}}
    </tbody>
  </table>
{{else}}
  <p id="blankslate">
    No Tree Nodes found
  </p>
{{/if}}
{{outlet}}

第一次访问 'diagcctreetoplevelonly' 时工作正常 - 呈现 12 行 - 但在随后的访问中（基础数据没有更改）模板呈现的 table 有 12 行额外每次访问的行数。

谁能解释我做错了什么？谢谢。

编辑：感谢@Jeff 和@Subtletree 的输入，我得以解决这个问题。

问题是返回的数据没有 'id' 属性，当我创建一个时，问题就消失了。

由于数据的特殊性，id 是什么并不重要，我不想对后端进行更改，所以我在数据到达客户端后动态创建了一个 id创建模型级序列化程序并重写 extractId 方法，如下所示：

import ApplicationSerializer from './application';

export default ApplicationSerializer.extend({
    extractId(modelClass, resourceHash) {
        var arrId = [];
        arrId.push(resourceHash['attributes']['cceIdentifierParent']);
        arrId.push(resourceHash['attributes']['cchCceIdParent']);
        arrId.push(resourceHash['attributes']['nodeType']);
        var id = arrId.join('|');
        return id == null || id === '' ? null : id+'';
  },
});

它不会在所有（也许是大多数？）情况下都有效，但对于我的情况来说，这已经足够好并解决了问题。

为了在应有的地方提供信用，我从@Casey 在这里的回答中得到了如何做到这一点的想法。

Answer 1

当 ember-data 从服务器接收记录时，它会尝试通过 ID 将它们与存储中已有的记录相匹配。如果不存在 ID，则它找不到匹配项，因此它不会更新它们，而只会添加它们。

您可以为每条记录添加一个 id，或者可以使用 ajax 获取数据，而不是对这个模型使用 ember-data。

ember.js 每次访问列表模板都会变大

ember.js list template keeps getting bigger on each visit

handlebars.js

ember.js