javascript - Backbone.js - 一个 View 应该如何更新多个 HTML 元素？

Question

给定以下 HTML

<div id="outer">
  <div id="innerA"></div>
  <div id="innerB"></div>
  <div id="innerC"></div>
</div>

View 的渲染方法是否应该单独更新每个元素，忽略父(外部)div:

MyView = Backbone.View.extend({
  model: null,

  initialize: function(options) {
    var self = this;
    this.model = options.model;
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  render: function() {
    var self = this;
    $('#innerA').html(this.model.get('A'));
    $('#innerB').html(this.model.get('B'));
    $('#innerC').html(this.model.get('C'));
  },
});

或者它应该写 HTML 和值:

MyView = Backbone.View.extend({
  el: '#outer',
  model: null,

  initialize: function(options) {
    var self = this;
    this.model = options.model;
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  render: function() {
    var self = this;
    var element = jQuery(this.el);
    element.html('');
    element.append('<div id="innerA">' + this.model.get('A') + '</div>');
    element.append('<div id="innerB">' + this.model.get('B') + '</div>');
    element.append('<div id="innerC">' + this.model.get('C') + '</div>');
    return this.el;
  },
});

或者它应该创建嵌套模型和 View 来委托(delegate)渲染:

MyView = Backbone.View.extend({
  model: null,

  initialize: function(options) {
    var self = this;
    this.model = options.model;
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  render: function() {
    var self = this;

    var modelA = new ModelA();
    modelA.set({
      value: this.model.get('A'),
    });
    var viewA = new ViewA({
      model: modelA
    });

    // Assume ViewA renders '<div id="innerA"></div>'
    $('#innerA').html(viewA.render().html());

    // Rinse and repeat for B and C.
  },
});

Answer 1

这完全取决于#innerA,#innerB,#innerC等

如果这些是具有自己的集合/模型的独立功能，它们在其中更新和检索数据，则最好将它们保留为单独的 View 。它们将完全处理它们的功能，其中父 View 将简单地控制操作，例如它们的创建、删除等。

对于您的前两个示例，所有这些似乎都使用相同的模型并且只打印单个属性。无需创建单独的 View 。渲染通常通过使用像下划线模板方法这样的模板引擎来处理:

MyView = Backbone.View.extend({
  template: _.template($('#temp').text()),
  initialize: function(options) {
    this.listenTo(this.model, 'change', this.render);
    this.render();
  },
  render: function() {
    this.$el.append(this.template(this.model.toJSON()));
  }
});
var view = new MyView ({
 model: new Backbone.Model(),
 el: $('#outer')
});

<div id="outer">
</div>
<script type="text/template" id="temp">
  <div id="innerA"><%=A%></div>
  <div id="innerB"><%=B%></div>
  <div id="innerC"><%=C%></div>
</script>

如果 #innerA, #innerB, #innerC 其中 3 个独立的功能， 您将有 4 个 View ，其中父 View 创建所有 3 个 subview ，并作为渲染的一部分附加到它。

---

旁注:

• Backbone 将自动为 View 设置 model 和 collection 选项(如果存在)，无需手动执行此操作
• 我们通常不会在 View 中使用像 $('#innerA') 这样的全局选择器(出于演示目的忽略模板选择器)。始终限制 View 内的 DOM 访问，例如 this.$('#innerA')(this.$el.find('#innerA')< 的别名)
• 阅读此 answer关于我所做的其他更改。