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

Question

给出以下HTML

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

如果View的render方法单独更新每个元素，则忽略父（外）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;
  },
});

或者它应该创建嵌套模型和视图来委托渲染：

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等的内容。

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

在前两个示例的情况下，所有这些似乎都使用相同的模型，只是打印单个属性。 无需创建单独的视图。 渲染通常通过使用模板引擎（如下划线模板方法）来处理：

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 #innerA ， #innerB ，其中有3个独立的功能，你将有4个视图，父视图创建所有3个子视图，并作为其渲染的一部分附加到它。

---

附注：

• 如果存在，Backbone将自动为视图设置model和collection选项，无需手动执行此操作
• 我们通常不在视图中使用全局选择器（如$('#innerA') （ 忽略模板选择器以进行演示 ）。 始终在视图中限制DOM访问，如下this.$('#innerA') （别名为this.$el.find('#innerA') ）
• 阅读这个答案，了解我所做的其他改变。