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

给定以下HTML

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

或者它应该编写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({
el:'外部'，
型号：空，
初始化：函数（选项）{
var self=这个；
this.model=options.model；
_.bindAll（这是“呈现”）；
this.model.bind（'change'，this.render）；
},
render:function（）{
var self=这个；
var元素=jQuery（this.el）；
html（“”）；
元素.append（“”+this.model.get（'A'）+“”）；
元素.append（“”+this.model.get（'B'）+“”）；
元素.append（“”+this.model.get（'C'）+“”）；
归还这个.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.
  },
});

MyView=Backbone.View.extend({
型号：空，
初始化：函数（选项）{
var self=这个；
this.model=options.model；
_.bindAll（这是“呈现”）；
this.model.bind（'change'，this.render）；
},
render:function（）{
var self=这个；
var modelA=新modelA（）；
模型集({
value:this.model.get（'A'），
});
var viewA=新viewA({
型号：modelA
});
//假设ViewA呈现“”
$（'#innerA'）.html（viewA.render（）.html（））；
//冲洗并重复B和C。
},
});
这完全取决于
#innerA
、
#innerB
、
#innerC
等的内容

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

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

MyView=Backbone.View.extend({
模板：_.template（$（'#temp'）.text（）），
初始化：函数（选项）{
this.listenTo（this.model，'change'，this.render）；
这个。render（）；
},
render:function（）{
this.el.append（this.template（this.model.toJSON（））；
}
});
var view=newmyview({
型号：新主干。型号（），
el:$（“#外部”）
});



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


旁注：


主干将自动为视图设置
模型
和
集合
选项（如果存在），无需手动执行此操作
我们通常不会在视图中使用全局选择器，如
$（“#innerA”）
（出于演示目的，请忽略模板选择器）。始终限制视图中的
DOM
访问权限，如
this.$（'innerA'）
（this.$code>this.$el.find（'innerA'）
）
阅读这篇关于我所做的其他更改的文章
我无法使用下划线.js模板，因为我的代码在Chrome扩展中运行。然而，你的回答确实回答了我的问题，我使用了胡须模板。什么是
var self=this
？@DivyeshKanzariya，通常用来保存对当前上下文的引用，但我在上面的回答中找不到它..？嗯，我读了一些关于它的博客文章，引用当前对象上下文
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.
  },
});