无法理解模型更改时更新 UI 的过程

Question

我有一系列模型。当模型更改时，它会触发集合上的更改事件。我观察集合更改事件，然后更新 UI。

我应该如何更新 UI？我不需要知道哪些模型是新的，以便我可以追加，以及哪些模型已经存在，以便我可以更新吗？

我觉得需要这种粒度的原因之一是因为有一个动画过渡，所以我需要将每个模型与其之前的状态相关联。骨干网对此有帮助还是我应该自己构建这个？

Answer 1

要了解哪些型号是新的，请收听该系列的“添加”事件。然后您可以渲染单个项目。

MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    // render the new item here
  },

  render: function(){
    this.collection.each(this.renderItem);
  }
});

在此示例中，呈现集合的工作方式与呈现单个项目相同 - 它调用“add”事件调用的相同 renderItem 方法。

要处理有排序列表的情况...您必须在 renderItem 方法中执行一些逻辑来找出项目的位置。可能是这样的（未经测试的代码......只是一个想法）：

MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    var itemView = new ItemView({model: item});
    itemView.render();
    return itemView;
  },

  render: function(){
    this.collection.each(function(item){
      var itemView = renderItem(item);
      var itemIndex = item.get("index");
      var previousItem = this.$(".myList")[itemIndex];
      $(itemView.el).insertAfter($(previousItem));
    });
  }
});

此代码假设您的模型上有一个索引属性，以了解模型应该采用的顺序。

另请注意，此代码获胜的可能性很高不按原样执行，因为我还没有对其进行测试。但它应该让您了解您想要编写的代码。

Answer 2

如果模型发生变化，您无需遍历集合。简单地为每个模型渲染一个子视图，您可以在其中处理 change 事件。

想象一下您有以下结构：

Collection: Tasks
Model:      Task

和两个视图：

Tasks view  (main view)
Task view   (sub view)

在任务视图的 #render 方法中，您渲染例如一个

元素，它将保存您的任务（子意见）。然后，您迭代所有集合的模型，并为每个模型创建一个任务视图，传递模型并将其 el 附加到您的主视图
中。
在任务视图中，您将#render 方法绑定到模型change 事件，每个任务视图都会自行处理。 ——我说得有道理吗？