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行 - 但是在后续访问中（没有更改基础数据），模板呈现的表每次访问时都有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 https://stackoverflow.com/a/35738573/364088的答案中了解了如何做到这一点。

Answer 1

当ember-data从服务器接收记录时，它会尝试将它们与ID中已存在的记录进行匹配。如果没有id存在，那么它找不到匹配，所以不是更新它们而只是添加它们。

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

每次访问时，ember.js列表模板都会变得越来越大

1 个答案: