Search code examples
javascriptjquerymodel-view-controllerbackbone.jsmarionette

Add models to backbone collection outside Marionette ItemView definition

I have two backbone collections rendered in divs like so: 

<html>
    <body>
        <div id="one">
            <-- Collection c1 rendered by Marionette ItemView App.V1 here -->
        </diV>

        <div id="two">
            <-- Collection c2 rendered by Marionette ItemView App.V2 here -->
        </div>
    </body>
</html>

Now I want to add models to collection c1 (and c2) but all I know is the div id - #one and #two because App.V1 and App.V2 were rendered like so: 

var App = new Marionette.Application();

App.addRegions= {
one: "#one",
two: "#two"
}

function r()
{
var c1= new C110;
c1.fetch();
var c2= new C220;
c2.fetch();
App.one.show(new App.V1({collection: c1});
App.two.show(new App.V2({collection: c2});
}

Where App is a global Marionette object; one is the region defined by div #one and two is the region defined by div #two.

My question is - How can I get hold of Collection c1 or c2 outside the definition of App.V1, App.V2 and r() and add some models to them (if I call r() again, I create new c1's and c2's so c1.add(...) and c2.add(....) becomes useless)?

Solution

  • It turns out that the global Marionette object App holds the reference to all Views (which are currently alive in the DOM) and their respective collection.

    So, in the above case, c1 can be accessed like so: App.one.currentView.collection
    Similarly c2 can be accessed like so: App.two.currentView.collection
    (Remember that one and two are names of Marionette regions defined by App and not the names of html div ids)