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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每次访问时,ember.js列表模板都会变得越来越大相关的知识,希望对你有一定的参考价值。

摘要

我对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的答案中得到了如何做到这一点的想法。

答案

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

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

以上是关于每次访问时,ember.js列表模板都会变得越来越大的主要内容,如果未能解决你的问题,请参考以下文章

使用 Ember.js 按模型类型/对象值选择视图模板

如何在 Ember JS 中获取模型数据

Ember.js 的视图层

ember JS:遍历json列表并在Handlebars中显示

ember.js学习笔记

基于布尔值过滤模板中的 Ember.js 数据