Javascript 单击时渲染视图事件

是否有一种方法可以使CompositeView中包含的ItemView仅在单击按钮时呈现？ 我希望在集合中进行更改以更新复合视图的dom，但每个单独的ItemView在需要时才应呈现

---

如果我的描述有点模糊，请原谅，但我对主干和木偶的了解非常有限。

正如您所知，木偶渴望获得您的合成（或集合）视图的子视图并生成它们。这就是为什么复合视图

render

方法中包含

\u renderChildren

过程的原因。一旦被调用，实际上就无法有选择地呈现子视图

但有一个后门可以绕过渲染整个集合。这是一个简单的操作，如用空集合初始化复合视图，如下所示

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

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

“空”复合视图将正常呈现自己的模板，只需跳过

\u renderChildren

然后，您可以连接一个事件来调用

myCompositeView.collection.add（model）

。你会注意到木偶监听你收藏中的

add

事件

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

    // Other _initialEvents methods...
  }
},

而

\u 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中有一组模型，但不在该视图的集合中。我通常只是连接一个

$.getJSON

（或任何其他AJAX方法）来获取数据并将其存储在视图对象的属性中。假设您在初始化时执行此操作：

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

时，集合将添加适当的模型，并且Mariontte确保渲染使用此模型填充的子视图

---

如何做到这一点有很多不同的方法，您不必在视图中连接事件。但我想我证明了如何让方法独立渲染。如果你提供更多信息，我可以给你更多的想法。

如果你能把你所做的代码放进去，那就太好了，我们将从你所停留的地方继续：）我非常感谢你简洁明了的描述。工作得很有魅力！我的压力很大，很高兴它有帮助！