单击时呈现视图事件

Render view on click event

本文关键字：视图 事件 单击      更新时间：2023-09-26

有没有办法让复合视图中包含的 ItemViews 仅在单击按钮时呈现？我想对集合进行更改以更新复合视图的 dom，但每个单独的 ItemView 都不应呈现，直到需要为止。

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

众所周知，木偶渴望获取您的复合（或集合）视图的子视图并生成它们。这就是为什么复合视图render方法中包含的是_renderChildren过程。调用后，实际上无法有选择地呈现子视图。

但是有一个后门可以渲染你的整个收藏。这很简单，就像initializing具有空集合的复合视图一样，如下所示

//Define MyCollection` and MyCompositieView and then...
var myCollection = new MyCollection(); // Construct an empty collection
var myCompositeView = new MyCompositeView({ collection: myCollection });

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

然后，您可以连线事件以调用 myCompositeView.collection.add(model) 。您会注意到木偶会监听您收藏的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 中拥有一个模型数组，但在该视图的集合之外。我通常只是连接一个$.getJSON（或任何其他 AJAX 方法）来获取数据并将其存储在 View 对象的属性中。假设您在初始化时执行此操作：

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 确保呈现使用此模型填充的子视图。

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

相关文章：