11

私は Backbone を使用して大規模なデータ構造に取り組んでおり、CompositeViews を介してデータが適切に表現される場合に出くわしています。つまり、ヘッダー、ボタンなど、周囲に「毛羽立ち」が追加された CollectionViews です。

ただし、 CompositeViews を互いに入れ子にするのは非常に困難です。CompositeView で標準の itemView プロパティを使用して別の CompositeView をレンダリングしても、まったく起動していないようです。

そのようにインスタンス化された親 ItemViewがあると仮定します（ Derick Baileyの例に従って、このトップレベルがfetch()コレクションのイニシャルが呼び出される場所であると仮定します）：

var User = Backbone.Model.extend({});

var UserCollection = Backbone.Collection.extend({
    model: User
});

var userList = new UserCollection(userData);

var schedulerCompositeView = new SchedulerCompositeView({
    collection: userList
});

schedulerCompositeView.render();

this.ui.schedulerWidget.html(schedulerCompositeView.el);

また、SchedulerCompositeViewは次のようになります。

return Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(schedulerCompositeViewTemplate),
    itemView: SchedulerDetailCompositeView,
    appendHtml: function (collectionView, itemView) {
        collectionView.$("#schedulerGroups").append(itemView.el);
    }
});

最後に、SchedulerDetailCompositeView :

return Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(schedulerDetailCompositeViewTemplate),
    itemView: SchedulerDetailItemView,
    appendHtml: function (collectionView, itemView) {
        collectionView.$("#schedulerDetailStops").append(itemView.el);
    }
});

SchedulerDetailCompositeView はインスタンス化されません。実際、そのappendHtml()メソッドはまったく起動していないようです。

明らかに、他にもいくつかの情報が欠落しています。明らかに、コレクション/モデルを SchedulerDetailCompositeView に渡すことが意図されていますが、ネストされた CompositeViews のために、そうするための適切な手法が何であるかはよくわかりません。

参考までに、私が達成しようとしている構造の大まかなモックアップを次に示します。ネストされた CompositeViews よりもこの目標を達成するためのより良い方法があるかもしれない場合、私は確かにすべての耳です:

http://jsfiddle.net/KAWB8/

4

1 に答える 1

16

ユーレカ！私は deven98602 によって正しい道に導かれました。

覚えておくべき重要な点は、複数の CompositeView (または CollectionView) をネストしている場合、各カスケード レベルは親からのセットの 1 つのユニットを表すということです。つまり、以前の SchedulerDetailCompositeView は、SchedulerCompositeViewのコレクションからの単一のモデルを表します。したがって、ネストされた CompositeViews (おそらく深くネストされたデータに基づく) を構築する場合、これらのカスケードされた子のコレクションを再定義する必要があります。これは、それらに関連付けられたモデルが 1 つしかなく、レンダリングする適切なコレクションがないためです。

つまり、更新されたSchedulerDetailCompositeViewは次のようになります。

return Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(schedulerDetailCompositeViewTemplate),
    itemView: SchedulerDetailItemView,
    initialize: function () {
        var Load = Backbone.Model.extend();

        var LoadCollection = Backbone.Collection.extend({
            model: Load
        });

        // this array of loads, nested within my JSON data, represents
        //  a new collection to be rendered as models using SchedulerDetailItemView
        var loadList = new LoadCollection(this.model.get("loads"));

        this.collection = loadList;
    },
    appendHtml: function (collectionView, itemView) {
        collectionView.$("#schedulerDetailStops").append(itemView.el);
    }
});

コレクションが設定appendHtml()されると、期待どおりに起動され、この新しく設定されたコレクション内の新しいモデルがそれぞれレンダリングされます。

于 2012-11-27T23:29:18.167 に答える