Backbone Marionette : Add a model (and render its view) to a nested Composite View

Question

If you don't want to see the complete code, here is what I am trying to do. I have multiple pages and each page has multiple tags. There is a composite View called PageManyView for rendering pages which called its childView PageView. Page View is a nested composite view which renders tags, passing this.model.get('tags') as collection.

Now I can easily add a new page by using pages.add(newPage). Here pages is the collection. I am facing problem in adding a new Tag. How can I do that. Please help.

CODE

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

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

My JSON at /data endpoint is coming like this

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

I have created Nested Views in Marionette like this:

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

Now here is where i am facing problem. Inside Controller of my application, lets say if I have to add a new page

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

}

Now this add function renders the new page automatically.

BUT I AM FACING PROBLEM IN ADDING a NEW TAG. HOW CAN I ADD A NEW TAG?

Answer 1

Finally it worked. Here is what I have done. Step 1: Get Current model (page) from pages collection.

var currentpage = pages.get(pageid);

Step 2: Use Marionette BabySitter to get the view of the page where I want to insert a new tag.

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

Step 3: Add tag to v.collection. Since v is the View of the page where I want to insert new tag, v.collection returns the initialised tags collection

v.collection.add(tag);

This works for me. Let me know if I am wrong somewhere or a better way exists. Hope it helps.