Question

I’m still learning Backbone and find it hard to handle relationships between models/collections. I have a fairly complex structure with nested collections (much like a forum system where a board can have multiple threads, which may have multiple comments).

Basically I’m trying to make an application that will generate CSS code for multiple selectors inside different section (headings, lists, forms, etc.). Here’s the structure I thought would make sense:

Sections (collection) > Section (model) > Selectors (collection) >
Selector (model)

My question: How can I instantiate a new selector and put it in a selectors collections, which will be in a section inside a collection of sections? Do I have to do this all manually?

Here’s the code I’ve come up with so far:

// The selector model containing the styling properties 
window.Selector = Backbone.Model.extend({
    defaults: {
        title: '',
        classname: '',
        locked: false,
        comments: null,
        properties: {},
        code: null,
        type: 'text',
        edited: false
    }
});

// The collection of selectors
window.Selectors = Backbone.Collection.extend({ 
    model: Selector,
    localStorage : new Store("selectors")
}); 

// A section that can contain multiple selectors
window.Section = Backbone.Model.extend({
    name: '',
    selectors : new Selectors
});

// The collection of sections 
window.Sections = Backbone.Collection.extend({
    model : Section,
    localStorage : new Store("sections")
});

// The view that will display the available selectors in the HTML template
window.SelectorsCollectionView = Backbone.View.extend({
    el : $('#selectors-collection-container'),

    initialize : function() {
        this.template = _.template( $('#selectors-collection-template').html() );

        _.bindAll(this, 'render');

        this.render();
    },

    render : function() {
        var renderedContent = this.template({ selectors : this.collection.toJSON() });
        $( this.el ).html( renderedContent );
        return this;
    }
});

That’s basically the only way I’ve found to instantiate new model objects and store them manually in their respective collections:

$(function() {
    // Create the selectors available initially; they will be used 
    // by the view and put in the HTML template
    var headings1 = new Selector({ title: 'h1', classname: 'alpha' });
    var headings2 = new Selector({ title: 'h2', classname: 'beta' });
    var headings3 = new Selector({ title: 'h3', classname: 'gamma' });
    var headings4 = new Selector({ title: 'h4', classname: 'delta' });
    var headings5 = new Selector({ title: 'h5', classname: 'epsilon' });
    var headings6 = new Selector({ title: 'h6', classname: 'zeta' });

    // Manually add the selectors to their collections
    selectors = new Selectors().add([ headings1, headings2, headings3, headings4, headings5, headings6 ]);

    // Now create a new section that will contain and represent
    // the previous selectors collection
    var headings = new Section({ name: 'headings' });


    /* Now we should have something like this: 
     * Selectors: headings1 ... headings6
     * Section: headings
     */


     // Now create another selector
    var list_item = new Selector({ title: 'li', comments: 'default style for the list-items' });

    // Manually add the list-item selector to a new collection
    // that will belong to a different section
    var selectors2 = new Selectors().add([ list_item ]);

    // Add the list collection to it's section
    var lists = new Section({ name: 'lists' });

    // Finally create a sections collections containing
    // all the different selector sections
    var sections = new Sections().add([ headings, lists ]);


    /* Now we should have something like this: 
     * Selectors: headings1 ... headings6
     * Section: headings
     *
     * Selectors: list_item
     * Section: lists
     */

    // Call the view and render the available selectors from the 
    // sections collection
    var selectorsView = new SelectorsCollectionView({ collection : sections });
    selectorsView.render();
});

Answer 1

From what I could infer from your question, perhaps these examples might help:

var headingsSelectors = new Selectors([{ title: 'h1', classname: 'alpha' }, { title: 'h2', classname: 'beta' }]);
var headingsSection = new Section({ name: 'headings', selectors: headingsSelectors });

// later you can do something like headingsSection.selectors.add([{ whatever }]);

var listingSelectors = new Selectors([{ title: 'li', comments: 'default style for the list-items' }]);
var listsSection = new Section({ name: 'lists', selectors: listingSelectors });

var sections = new Sections([headingsSection, listsSection]);