Backbone Marionette：将模型（并渲染其视图）添加到嵌套的复合视图中

Question

如果您不想看到完整的代码，这就是我想要做的。 我有多个页面，每个页面都有多个标签。有一个名为 PageManyView 的复合视图用于渲染页面，称为它的 childView PageView。 Page View 是一个嵌套的复合视图，它呈现标签，将 this.model.get('tags') 作为集合传递。

现在我可以使用 pages.add(newPage) 轻松添加新页面。这里的页面是集合。 我在添加新标签时遇到问题。我怎样才能做到这一点。请帮忙。

代码

var PageModel = Backbone.Model.extend({});

var PageCollection = Backbone.Collection.extend({
    model: PageModel
});

我在 /data 端点的 JSON 是这样来的

[
  {
    _id: '1', 'name': '1', info: 'Page 1',
     tags: [{name:'main', color:'red'}, {name:'page', color:'blue'}]
  },
  {
    _id: '1', 'name': '2', info: 'Page 2',
     tags: [{name:'section', color:'blue'} {name:'about', color:'yellow'}]
  }
]

我在 Marionette 中创建了这样的嵌套视图：

TagView = Marionette.ItemView.extend({
   template: '#tagOneTemplate'
});

PageView = Marionette.CompositeView.extend({
    template: '#pagesTemplate',
    childViewContainer: 'div.tags',
    childView: EntityViews.TagView,
    initialize: function(){
        var tags = this.model.get('tags');
        this.collection = new Backbone.Collection(tags);
    }
});

PageManyView = Marionette.CompositeView.extend({
     template: '#pageManyTemplate',
     childView: EntityViews.PageView,
     childViewContainer: 'div#all-pages'
});

现在这是我面临问题的地方。在我的应用程序的 Controller 中，假设我是否必须添加一个新页面

showPages: function(){
   //Getting pages by using jQuery deferred
    var view = PageMainView({collection:pages});
    view.on("add:page", function(){
       var newPage = Page({_id: 3});
       pages.add(newPage);
    });

}

现在这个添加函数会自动呈现新页面。

但我在添加新标签时遇到了问题。如何添加新标签？

Answer 1

终于成功了。这是我所做的。 第 1 步：从页面集合中获取当前模型（页面）。

var currentpage = pages.get(pageid);

第 2 步：使用 Marionette BabySitter 获取我要插入新标签的页面的视图。

var v = view.children.findByModel(currentpage);

第 3 步：将标签添加到 v.collection。由于 v 是我要插入新标签的页面的视图，因此 v.collection 返回初始化的标签集合

v.collection.add(tag);

这对我有用。让我知道我是否在某个地方错了或存在更好的方法。希望对您有所帮助。

Answer 2

这可以很容易地通过改变你的集合的传入方式来完成。而不是在你的复合视图中设置集合的初始化，你应该在实例化过程中直接传递它。这样，当您从模型中更改集合时，compositeView 将听到集合上的“添加”事件并自动为您添加节点

例如，它可能看起来像这样。

PageView = Marionette.CompositeView.extend({
    template: '#pagesTemplate',
    childViewContainer: 'div.tags',
    childView: EntityViews.TagView,
});

new PageView({
  model: myModel,
  collection: myModel.get("tags")
});

myModel.get("tags").add([{new: "object"}])