backbone.js : 컬렉션/다른 모델에서 모델을 인스턴스화하는 방법

Question

저는 여전히 백본을 배우고 있으며 모델/컬렉션 간의 관계를 처리하기가 어렵습니다. 나는 중첩 된 콜렉션 (보드가 여러 개의 주석을 가질 수있는 다중 스레드를 가질 수있는 포럼 시스템과 매우 흡사 함)이있는 상당히 복잡한 구조를 가지고 있습니다.

기본적으로 다른 섹션 (표제, 목록, 양식 등) 내의 여러 선택기에 대한 CSS 코드를 생성하는 응용 프로그램을 만들려고합니다. 여기에 내가 할 것이라고 생각 구조의 의미 :

섹션 (컬렉션)> 섹션 (모델)> 선택기 (컬렉션)> 선택기 (모델)

내 질문 :가 어떻게 인스턴스화 할 수 새 선택기를 선택 모음 모음에 넣습니다. 선택 모음은 섹션 모음에있는 섹션에 있습니까? 이 모든 작업을 수동으로 수행해야합니까?

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