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

附注：

Backbone将自动设置model＆amp;视图的collection选项（如果存在），无需手动执行此操作
我们通常不在视图中使用$('#innerA')之类的全局选择器（忽略模板选择器以用于演示目的）。始终在视图中限制DOM访问权限，例如this.$('#innerA')（this.$el.find('#innerA')的别名）
关于我所做的其他更改，请阅读此answer。

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

1 个答案: