Ember 数据模型重新加载导致 {{each}} 中的项目被删除/插入回来 - 丢失当前状态

我怎样才能防止itemView在迭代控制器时被删除并重新渲染回原位arrangedContent，如果观察到的模型的属性没有改变值？

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

控制器：

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

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

一种想法是将删除/插入放入 arrayWillChange/arrayDidChange 中排队，如果值没有更改则不调用它们。我怀疑这会导致额外的同步问题。

您可能正在使用find or all对于您的集合，这使其成为实时过滤器（根据需要将其删除/添加到集合中。您可以将集合移动到普通数组，这将消除此逻辑。您可以从路由或控制器执行此操作

Route

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

控制器

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

然后在你的模板中

{{#each item in simpleModel}}

{{/each}}

注意：执行此操作时，如果您向商店添加新商品，则需要手动将其添加到集合中。