low coupling: add a model to a collection of a different view

Question

i'm building a Backbone/Marionette application to list different sets of cards. the layout has an ItemView on the left side including an input field to add a new set and a CompositeView on the right side to list the card sets.

Cards.module("Set.SideBar", function(SideBar, App) {
    SideBar.SideBarView = Backbone.Marionette.ItemView.extend({
        template: "#set-sideBar",
        className: "well sidebar-nav",
        ui: {
            saveBtn: "a.saveSet",
            setName: "input[type=text]"
        },
        events: {
            "click .saveSet": "saveSet"
        },
        saveSet: function(ev) {
            ev.preventDefault();

            var newSetName = this.ui.setName.val().trim();
            var newSet = new Cards.Entities.Set({ name: newSetName });

            newSet.save();

            // How to add the model to the collection?
        }
    });
});

i'm looking for the best way to add the newSet to the collection of the CompositeView below. is there any clean low coupling solution to deal with that? i'm quite new to backbone.js and can't imagine that this is something totally unordinary, but somehow i'm not able to find an answer to my question in the regarding docs - or just dont understand them.

Cards.module('Set.List', function(List, App) {
    List.SetItemView = Backbone.Marionette.ItemView.extend({
        tagName: "tr",
        template: "#set-list-item"
    });

List.SetView = Backbone.Marionette.CompositeView.extend({
        tagName: "table",
        className: "table table-bordered table-striped table-hover",
        template: "#set-list",
        itemView: List.SetItemView,
        itemViewContainer: "tbody",
        modelEvents: {
            "change": "modelChanged"
        },

        initialize: function() {
            this.collection.fetch();
        }
    });
});

thanks in advance for your help!

how i'm doing it now:

thanks for both answers, they were guiding me in the right direction. the collection.create hint was also very useful and solved another problem i was facing!

inside a Marionette.Controller i do something like this and simply share the collection reference:

var setLayout = new Cards.Set.Layout();
Cards.mainRegion.show(setLayout);

var sets = new Cards.Entities.SetCollection();
var listView = new Cards.Set.List.SetView({ collection: sets });
setLayout.listRegion.show(listView);

var sideBarView = new Cards.Set.SideBar.SideBarView({ collection: sets });
setLayout.sideBarRegion.show(sideBarView);

and the new model is simply added by collection.create instead of .save() and .add().

Why not share the collection instance with your sidebar view and add the new model using the Collection.add method? — net.uk.sweet, May 20 '13 at 00:12

damienc88 · Accepted Answer · 2013-05-20T05:04:37.777

Backbone.Collection.add can be used to add a model to an existing backbone collection. http://backbonejs.org/#Collection-add

Also, look in to Collection.Create - http://backbonejs.org/#Collection-create

If your model is being persisted, then immediately added to the collection, you can skip your model.save() then collection.add() and just use collection.create(model)

Edit: And as already mentioned, make the collection instance visible from the sidebar view

score 1 · Answer 2 · answered May 20 '13 at 15:15

1

To keep views decoupled, you can raise events from one view that other view(s) can listen to and handle however they please.

answered May 20 '13 at 15:15

Robert Levy

28,747
6
62
94

but is it also possible to send some custom data with events? – d4n13l May 20 '13 at 18:33
Yes, whatever you pass as the 2nd parameter to trigger() will be passed along as the first parameter of any event listeners – Robert Levy May 20 '13 at 23:22

low coupling: add a model to a collection of a different view

how i'm doing it now:

2 Answers2