javascript - 我可以将 Marionette Collection View 附加到现有 HTML 吗？

Question

我使用带有节点的 browserify 在服务器上呈现一个集合，然后在客户端使用 Marionette。

是否可以使用 Marionette 区域 attachView() 将 CollectionView 附加到现有的 html 列表？

Answer 1

Marionette 不提供通过标准 API 执行此操作的方法，但可以使用 Marionette 的一些内部 CollectionView 方法。我在这里提供了一个示例:

http://jsbin.com/zirupeli/1/edit

关键部分是CollectionView中的createChildren函数:

var List = Marionette.CollectionView.extend({
  el: 'ul',

  itemView: Item,

  initialize: function() {
    this.createChildren();
  },

  createChildren: function() {
    this.collection.each(function(model) {
      var view = new this.itemView({
        el: 'li:eq(' + (model.get('id') - 1) + ')',
        model: model
      });

      // set up the child view event forwarding
      this.addChildViewEventForwarding(view);

      // Store the child view itself so we can properly
      // remove and/or close it later
      this.children.add(view);
    }, this);
  }
});

这里我们只是为集合中的每个项目创建一个 ItemView，然后调用两个内部 Marionette CollectionView 方法:this.addChildViewEventForwarding 和 this.children.add。 Marionette 在呈现 subview 时在内部使用这些:

https://github.com/marionettejs/backbone.marionette/blob/master/lib/backbone.marionette.js#L1687

只是为了证明这是正常工作的，四秒后您应该注意到一个项目被添加到列表中，八秒后列表中的第一个项目被删除。