每次访问时,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列表模板都会变得越来越大的主要内容,如果未能解决你的问题,请参考以下文章