Ember数据模型重新加载导致{{each}}中的项目被删除/插入回来 - 丢失当前状态 [英] Ember data model reload causes item in {{each}} to be removed/inserted back - losing current state

问题描述

如果在迭代控制器的 arrangeContent itemView 被删除并重新呈现>，如果观察模型的属性不改变价值？

How could I prevent the itemView from being removed and re-rendered back in place when iterating over a controller's arrangedContent, if the observed model's property doesn't change value?

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

Short version below, using a blog post App.Post as example model:

控制器：

sortProperties: ['createdAt']

模板：

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

objectAt（0）.reload（）导致相应的项目被删除并插回到同一个地方。问题是itemView丢失了以前的状态，所以结果是一些坏的用户交互。

objectAt(0).reload() causes the corresponding item to be removed and inserted back in the same place. The problem is that the itemView loses the previous state, so the result is some bad user interaction.

我已经跟踪到这个调用序列：

I've traced it to this sequence of calls:

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

我需要它当

I'd need it to not to do the remove/insert sequence when the property hasn't changed actual value.

一个想法是排队arrayWillChange / arrayDidChange中的删除/插入，而不是执行删除/插入序列如果值没有变化，不会调用它们。我怀疑这会导致额外的同步问题。

One thought was to queue the removes/inserts in arrayWillChange/arrayDidChange and not call them if the value didn't change. I suspect that this would cause additional sync problems.

推荐答案

你可能正在使用 find 或所有为您的集合，使其成为一个实时过滤器（根据需要删除/添加到集合中）您可以将集合移动到一个纯数组，将会消除这个逻辑，你可以从路由或控制器中执行此操作。

You're probably using find or all for your collection which makes it a live filter (which removes/adds it to collections on demand. You can move the collection to a plain array, which will take away this logic. You can do this from the route, or 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}}

注意：当你这样做，如果你添加一个新的项目到商店，你将需要手动将其添加到集合中。

Note: when you do this, if you add a new item to the store, you will need to manually add it to the collection.

这篇关于Ember数据模型重新加载导致{{each}}中的项目被删除/插入回来 - 丢失当前状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！