backbone.js - バックボーンで単一のコレクションを使用して 2 つのビューをレンダリングする

Question

バックボーンで単一のコレクションを使用して 2 つのビューをレンダリングしているときに問題に直面しています。私のアプリには、Items コレクションを初期化する Main View があり、すべての子ビューからアクセスできるようになっています。コレクションにアイテムが追加されるたびに、両方のビュー (クイックおよび通常) で単一のアイテムをレンダリングするために使用されるアイテム ビューがあります。クイック ビューは、アプリのすべてのルートに対してレンダリングする必要があります。一方、通常のビューは、呼び出されたドメイン/チェックアウト ルートのみをレンダリングします。ドメイン/チェックアウトは、次の 2 つの方法で呼び出すことができます。

1. チェックアウト ボタンをクリックします。この場合、両方が同期しており、正常に動作しています。
2. ドメイン/チェックアウト パスに直接アクセスします。この場合、クイック ビューと通常ビューは同期していません。

// メイン ビュー

var mainView = Backbone.View.extend({
    el: 'body',
    template: {
        header: Handlebars.compile(headerTemplate),
        mainNav: Handlebars.compile(mainNavtemplate),
        footer: Handlebars.compile(footerTemplate)
    },
    initialize: function() {
        _.bindAll(this);
        AW.collection.bag = new bagCollection();
        AW.collection.bag.fetch({reset:true});
    },
    render: function() {
        this.$el.html(this.template());
        this.loadSubView('bagQV');
    }
});

// クイックビュー

var bagQuickView = Backbone.View.extend({
    tagName:    'div',
    id:         'myBagQV',
    template:   Handlebars.compile(bagQuickViewTemplate),
    initialize: function() {
        _.bindAll(this);
        //this.collection.fetch({reset:true});
        //this.collection.bind("reset", _.bind(this.render, this));
        this.listenTo(this.collection, 'add', this.addItem);
        this.listenTo(this.collection, 'reset', this.render);
    },
    render: function() {
        if($('#myBagQV').length == 0) {
            this.$el.html(this.template());
            $('body').append(this.el);
        }
        this.addAllItems();
        return this;
    }
});

// 通常のビュー

var bagView = Backbone.View.extend({
    tagName:    'div',
    id:         'myBag',
    template:   Handlebars.compile(checkoutBagTemplate),
    initialize: function() {
        _.bindAll(this);
        //this.collection.fetch({reset:true});
        //this.collection.bind("reset", _.bind(this.render, this));
        this.listenTo(this.collection, 'add', this.addItem);
        this.listenTo(this.collection, 'reset', this.render);
    },
    render: function() {
        this.$el.html(this.template());
        $('#checkoutContainer #details').append(this.el);
        this.addAllItems();
        return this;
    }
});