Question

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

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

CODE

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

现在我正面临着问题。在我的应用程序的内部控制器中，假设我是否必须添加新页面

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将听到＆＃34;添加＆＃34;收集事件并自动为您添加节点

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

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"}])

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

2 个答案: