ember.js - Ember 数据模型重新加载导致 {{each}} 中的项目被移除/插入 - 失去当前状态

Question

如果观察到的模型的属性没有改变值，我如何防止 itemView 在遍历 Controller 的 arrangedContent 时被移除并重新渲染回原位？

下面的简短版本，使用博客文章 App.Post 作为示例模型:

Controller :

sortProperties: ['createdAt']

模板:

{{each arrangedContent}}
    {{title}}
    {{body}}
{{/each}}

objectAt(0).reload() 导致相应的项目被删除并插入到相同的位置。问题是 itemView 丢失了之前的状态，因此导致一些糟糕的用户交互。

我已经将其追溯到这个调用序列:

1. retrieved record is pushed onto the store
2. notifyPropertyChange('data') onto the record
3. propertyWillChange('createdAt')
4. arrayWillChange() -> this causes the removal of the item, even though
                        the value of createdAt didn't change
5. arrayDidChange()  -> reinserts the object, it gets re-rendered in the list

当属性未更改实际值时，我需要它不执行删除/插入序列。

一个想法是在 arrayWillChange/arrayDidChange 中对删除/插入进行排队，如果值没有改变则不调用它们。我怀疑这会导致其他同步问题。

Answer 1

您可能正在为您的集合使用 find 或 all，这使它成为一个实时过滤器(根据需要将其删除/添加到集合中。您可以移动集合到一个普通数组，这将带走这个逻辑。您可以从路由或 Controller 执行此操作

路线

App.FooRoute = Em.Route.extend({
  model: function(){
    return this.store.find('foo').then(function(foos){
      return foos.toArray();
    });
  }
});

Controller

App.FooController = Em.ArrayController.extend({
  simpleModel: function(){
    return this.get('model').toArray();
  }.property()
});

然后在你的模板中

{{#each item in simpleModel}}

{{/each}}

注意:执行此操作时，如果向商店添加新商品，则需要手动将其添加到收藏。