Question

我的应用程序没有经过优化设计。我没有时间重新编写它，需要找到解决以下问题的方法：

在我的应用程序中，可以将新元素添加到集合中，并且集合视图中有一个函数可以决定是在顶部还是底部插入新元素：

if (someLogic) {
  this.$container.prepend( newEl );
} else {
  this.$container.append( newEl );
}

还可以编辑元素;在这种情况下，应用程序首先破坏旧视图，如果有的话：

item.trigger('destroyView');

然后呈现它。不知怎的，它是在以前的地方呈现的：

+--------+           +--------+
|   x1   |           |   x1   |
+--------+           +--------+
|   x2   |           |   x2   |
+--------+   ====>   +--------+
|   x3   |           |   x3a  |
+--------+           +--------+
|   x4   |           |   x4   |
+--------+           +--------+

现在，由于某些更改，已编辑的元素将呈现在集合视图的顶部或底部。

我的问题是：如何在以前的相同位置渲染它我尝试在模型上添加一个监听器，如here所述，但是一些编程逻辑似乎被打破了。

有没有办法：

用新渲染的视图替换现有视图？

OR
通过迭代容器视图元素，获取相应的模型？（模型有一个表示顺序的属性，因此我可以使用insertAfter或insertBefore）

Answer 1

我发现解决方案比我想象的要容易。

在我得到新模型的地方，我可以确定模型是否已经存在如果它存在，而不是销毁旧视图并再次渲染，我只是发送一个触发器，以便再次渲染视图，在同一个地方：

容器视图：

var model = this.collection.findWhere({id:newInteractionData.id});
if (model) {
  model.trigger('render');
} else {
  // here comes the old 'render' code
}

项目视图：

this.listenTo(this.model, "render", this.render);

主干替换视图/获取视图位置

1 个答案: