backbone.js: Comment instancier des modèles dans des collections/autres modèles

Question

J'apprends encore Backbone et j'ai du mal à gérer les relations entre les modèles/collections. J'ai une structure assez complexe avec des collections imbriquées (un peu comme un système de forum où un forum peut avoir plusieurs threads, qui peuvent avoir plusieurs commentaires).

Fondamentalement, j'essaie de faire une application qui va générer du code CSS pour plusieurs sélecteurs dans une section différente (en-têtes, listes, formulaires, etc.). Voici la structure que je pensais serait logique:

Sections (collection)> Section (modèle)> Selectors (collection)> Sélecteur (modèle)

Ma question: Comment puis-je instancier un nouveau sélecteur et le mettre dans une collection de sélecteurs, qui sera dans une section à l'intérieur d'une collection de sections? Dois-je faire tout cela manuellement?

Voici le code que je suis venu avec jusqu'à présent:

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

C'est essentiellement la seule façon que j'ai trouvé instancier de nouveaux objets de modèle et de les stocker manuellement dans leurs collections respectives:

$(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

d'après ce que je pouvais déduire de votre question, peut-être ces exemples pourraient aider:

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