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') ）
• 閱讀這個答案，了解我所做的其他改變。