Backbone.js 主干中有一个集合的多视图和子视图

我在为我的网站使用主干渲染购物袋视图时遇到问题

我对所有行李视图使用1个集合（“快速查看”项目列表和“正常查看”项目列表）。我还创建了“Item_视图”，用于渲染两个视图中的每个项目

它是一个SPA（单页应用程序），为所有主干路由启动和呈现“Quick_View”，默认情况下隐藏。每当用户从显示的任何页面单击“快速查看”链接时。没有为其定义路由

“正常视图”可使用“快速视图”中给出的签出按钮访问。它与“域/签出”路由绑定

当我从“快速查看”检查按钮访问“正常查看”时；它工作正常，并且（快速和正常）视图都是同步的。这意味着，当我们添加、删除、更新任何视图中的任何项时，两个视图都会相应地更新

但当我在新浏览器中直接访问“域/签出”路径时，两个视图都得到了良好的渲染，但它们并不同步。意味着，一个视图中的更改不会更新另一个视图

我跟踪的原因是，当我通过“快速视图”访问“正常视图”时，两个视图中每个项目的模型都具有相同的CID，因此，如果任何视图中的模型有任何更改，则两个视图都是同步的

而且，当我直接访问“Normal_视图”时，两个视图中每个项目的模型都没有相同的CID，因此它们不能按预期工作

还有几点需要考虑：

• 集合为“快速查看”和每个项目触发两次重置事件 在“快速视图”中，渲染两次
• 当我访问“正常视图”（无论哪种方式）时，“快速视图”再次被渲染，但一旦“正常视图”渲染结束

//主视图

var mainView = Backbone.View.extend({
    el: 'body',
    template: {
        header: Handlebars.compile(headerTemplate),
        mainNav: Handlebars.compile(mainNavtemplate),
        footer: Handlebars.compile(footerTemplate)
    },
    initialize: function() {
        _.bindAll();
        AW.collection.bag = new bagCollection();
        //AW.collection.bag.fetch({reset:true});
    },
    render: function() {
        this.$el.html(this.template());
        this.loadSubView('bagQV');
    },
    loadSubView: function(subView) {
        switch(subView) {
            case 'home' :
                if(!AW.view.home) AW.view.home = new homepageView();
                AW.view.home.render();
                break;
            case 'bagQV'    :
                if(!AW.view.bagQV) AW.view.bagQV = new bagQuickView({collection: AW.collection.bag});
                //AW.view.bagQV.render();
                break;
            case 'checkout' :
                if(!AW.view.checkout) AW.view.checkout = new checkoutView({collection: AW.collection.bag});
                AW.view.checkout.render();
                break;
        }
    }
});

//单项视图

var bagItemView = Backbone.View.extend({
    tagName: 'tr',
    template:   Handlebars.compile(bagItemTemplate),
    initialize: function() {
        _.bindAll(this);
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'remove', this.removeItem);
        $(document).on('keyup', this.listenKeyboard);
    },
    events: {
        'click .qtyInput .button'           : 'updateItem',
        'click .controls a.remove'          : 'removeModel'
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.attr('data-id',this.model.cid);            
        return this;
    },
    updateItem: function(e) {
        e.preventDefault();
        e.stopPropagation();
        var newQty = this.$el.find('.qtyInput input').val();
        var newAmt = newQty * parseFloat(this.model.get('prodRate').replace('$',''));
        this.model.set({prodQty: newQty, amount: '$' + newAmt});
        this.cancelEdit(e);
    },
    removeModel: function(e) {
        e.preventDefault();
        e.stopPropagation();
        if(AW.collection.bag) AW.collection.bag.remove(this.model);

    },
    removeItem: function() {
        this.$el.remove();
    }
});

//包快速查看

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;
    },
    addItem: function(item) {
        var parent = this;
        var itemView = new bagItemView({model: item});
        $('#itemsInBag table tbody').append(itemView.render().el);
    },
    addAllItems: function() {
        if(this.collection.length > 0) {
            $('#itemsInBag table tbody').html('');
            this.collection.each(this.addItem, 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;
    },
    addItem: function(item) {
        var parent = this;
        var itemView = new bagItemView({model: item});
        this.$el.find('table tbody').append(itemView.render().el);
    },
    addAllItems: function() {
        if(this.collection.length > 0) {
            this.$el.find('table tbody').html('');
            this.collection.each(this.addItem, this);
        }
    }
});

我在找你帮忙。 先谢谢你

干杯，

---

Vikram

Hello mu太短，评论是暂时的。我发现问题在于collection.fetch（）方法和listenTo方法。我们只需要正确地使用它们路由器中发生了什么？你能不能在Gtalk或twitter上和我聊天，这样我就可以详细地解释我的问题了。Gtalk：vikram1vicky@gmail.com还有推特：vikram1vicky