Backbone.js 主干木偶：将模型（并渲染其视图）添加到嵌套的复合视图中

如果您不想看到完整的代码，下面是我试图做的。 我有多个页面，每个页面都有多个标签。有一个名为PageManyView的复合视图用于呈现页面，该视图称为其子视图PageView。页面视图是一个嵌套的复合视图，它呈现标记，并将此.model.get（'tags'）作为集合传递

var currentpage = pages.get(pageid);

现在我可以使用pages.add（newPage）轻松添加新页面。这里是收藏我在添加新标签时遇到问题。我该怎么做呢。请帮忙

代码

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

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

我的JSON at/data端点如下所示

[
  {
    _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'}]
  }
]

我在木偶中创建了嵌套视图，如下所示：

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'
});

这就是我面临的问题所在。在我的应用程序的控制器内部，假设我必须添加一个新页面

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);
    });

}

现在，这个add函数自动呈现新页面

---

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

通过改变收藏的传递方式，可以非常轻松地完成此操作。您不应该在compositeView中将集合设置为initialize，而应该在实例化过程中直接传递它。这样，当您从模型中更改集合时，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"}])

---

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

var currentpage = pages.get(pageid);

第2步：使用木偶保姆获得我想要插入新标签的页面视图

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

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

v.collection.add(tag);

---

这对我有用。如果我在某个地方错了，或者有更好的方法，请告诉我。希望有帮助。

您的

页面视图

应该监听模型上的更改，如果有，则重置其标签集合。然后，您可以轻松地将新标记添加到页面集合中的任意模型中。但这是如何实现的呢。我的意思是我得到了页面集合，我直接将其呈现为var view=PageMainView（{collection:pages}）；将视图添加到我的木偶区域。您建议的方式是调用PageView而不是PageMain视图。这意味着我必须遍历页面中的每个模型，然后呈现PageView。在这种情况下，页面id、名称和信息将如何显示？我从不实例化PageView。而是实例化PageManyView并呈现它。我错过什么了吗@桑科内