Question

有没有办法让CompositeView中包含的ItemView只渲染点击按钮？我希望对集合进行更改以更新Composite View的dom，但是每个单独的ItemView都不应该在需要之前呈现。

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

Answer 1

众所周知，Marionette渴望获取您的复合（或收藏）视图的儿童视图并将其生成。复合视图render方法中包含的原因是_renderChildren进程。一旦被调用，就没有办法选择性地呈现儿童观点。

但是有一个后门可以渲染你的整个系列。它是一个简单的initializing复合视图，带有一个空集合，就像这个

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

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

＆＃34;空＆＃34; Composite View将正常呈现自己的模板，只需跳过_renderChildren。

然后，您可以连接一个事件来呼叫myCompositeView.collection.add(model)。您会注意到Marionette会在您的收藏中收听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会确保渲染一个填充了此模型的子视图。

有关如何执行此操作的变体，您不必在视图中连接事件。但我想我证明了你可以独立渲染方法。如果您提供更多信息，我可以为您提供更多想法。

单击事件的渲染视图

1 个答案:

全部放在一起