点击事件渲染视图

Question

有没有办法让 CompositeView 中包含的 ItemView 只在点击按钮时呈现？我想更改集合以更新复合视图的 DOM 但每个单独的 ItemView 在需要之前不应呈现。

如果我的描述有点含糊，请原谅我，但我对 Backbone 和 Marionette 的了解非常有限。

Answer 1

如您所知，Marionette 急于获取您的 Composite（或 Collection）视图的 children 视图并生成它们。这就是复合视图 render 方法中包含 _renderChildren 过程的原因。调用后，确实无法有选择地 呈现 children 视图。

但是有一个后门可以绕过渲染整个 collection。很简单 initializing 你的 Composite View 有一个空的 collection，像这样

//Define MyCollection` and MyCompositieView and then...
var myCollection = new MyCollection(); // Construct an empty collection

var myCompositeView = new MyCompositeView({ collection: myCollection });

一个"empty" Composite View会正常渲染自己的模板，直接跳过_renderChildren.

然后您可以连接一个事件来调用 myCompositeView.collection.add(model)。您会注意到 Marionette 在您的 collection、

上侦听 add 事件

_initialEvents: function() {
  if (this.collection) {
    this.listenTo(this.collection, 'add', this._onCollectionAdd);

    // Other _initialEvents methods...
  }
},

和_onCollectionAdd负责渲染添加的模型：

_onCollectionAdd: function(child) {
  this.destroyEmptyView();
  var ChildView = this.getChildView(child);
  var index = this.collection.indexOf(child);
  this.addChild(child, ChildView, index);  // The rendering happens here
},

综合起来

要完成这项工作，您必须在 CompositeView 内有一个模型数组，但在该视图 collection 之外。我通常只是连接一个 $.getJSON（或任何其他 AJAX 方法）来获取数据并将其存储在视图 object 的属性中。假设您在初始化时执行此操作：

initialize: function() {
  var that = this,
      dataUrl = "some/url";
  $.getJSON(dataUrl, function(data) {
    that.myModels = data;
  });
},

而且，在您的复合视图中，您可能会有一个事件，比如点击复合视图的一个元素：

events: {
  'click button': 'addChild'
}

addChild: function (event) {
  // functionality to identify which child to add to the collection
  this.collection.add(this.myModels[j]); // Where 'j' is the index the model you want lives in.
});

当调用 addChild 时，collection 添加正确的模型，并且 Mariontte 确保渲染填充了该模型的 child 视图。

执行此操作的方式有所不同，您不必在视图中连接事件。但我想我证明了如何让方法独立呈现。如果你提供更多的信息我可以给你更多的想法。

点击事件渲染视图

Render view on click event

javascript

backbone.js

marionette

综合起来