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

【问题标题】：Can't grok the process of updating UI on model change无法理解模型更改时更新 UI 的过程
【发布时间】：2011-09-18 22:52:20
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript backbone.js coffeescript

【解决方案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));
    });
  }
});

此代码假定您的模型上有一个 index 属性，以了解模型应该处于的顺序。

还请注意，此代码很可能不会按原样执行，因为我尚未对其进行测试。但它应该让您对要编写的代码有所了解。

【讨论】：

【解决方案2】：

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

假设您有以下结构：

Collection: Tasks
Model:      Task

还有两种观点：

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

在任务视图的#render 方法中，您呈现例如一个<ul> 元素，它将保存您的任务（子视图）。然后您遍历所有集合的模型并为每个模型创建一个任务视图，传递模型并将它的el 附加到您的主视图<ul>。在您的任务视图中，您将#render 方法绑定到模型change 事件，每个任务视图将自行处理。 ——我说得有道理吗？

【讨论】：

假设某项任务从列表中的第 5 位变为第 3 位。将这个任务向上移动两个位置的渲染方法会是什么样子？
在这种情况下，您必须重新渲染主视图（= 任务视图）。根据您进行排序的方式，您可能需要重新获取集合。