backbone.js: Как создавать экземпляры моделей внутри коллекций/других моделей

Question

Я все еще изучаю Магистраль и трудно справляться с отношениями между моделями/коллекциями. У меня довольно сложная структура с вложенными коллекциями (очень похожая на систему форума, где на плате может быть несколько потоков, которые могут иметь несколько комментариев).

В основном я пытаюсь создать приложение, которое будет генерировать CSS-код для нескольких селекторов внутри другого раздела (заголовки, списки, формы и т. Д.). Вот структура я думал, имело бы смысл:

Разделы (сборник)> Раздел (модель)> селекторы (сборник)> Selector (модель)

Мой вопрос: Как я могу создать экземпляр новый селектор и поместил его в коллекции селекторов, которые будут в разделе внутри коллекции разделов? Должен ли я делать все это вручную?

Вот код, который я придумал до сих пор:

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

Это в основном единственный способ я нашел, чтобы создать экземпляр новых объектов модели и сохранять их вручную в своих коллекциях:

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

из того, что я мог бы сделать вывод из вашего вопроса, возможно, эти примеры могут помочь:

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