1

私はまだBackboneを学んでいて、モデル/コレクション間の関係を処理するのが難しいと感じています。私はネストされたコレクションを持つかなり複雑な構造を持っています（ボードが複数のスレッドを持つことができ、複数のコメントを持つことができるフォーラムシステムのように）。

基本的に、私は異なるセクション（見出し、リスト、フォームなど）内の複数のセレクター用の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();
});
4

1 に答える 1

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]);
于 2012-05-22T03:29:25.910 に答える