Question

我在Backbone中使用单个集合渲染2个视图时遇到问题。在我的应用程序中，有一个主视图，我在其中初始化Items Collection，因此所有子视图都可以访问它。有一个项目视图，用于在任何项目添加到集合时在两个视图（快速和普通）中呈现单个项目。必须为应用程序的所有路径呈现快速查看。然而，普通视图将仅呈现调用的域/结帐路由。可以通过两种方式调用域/结帐：

点击结帐按钮 - 在这种情况下，两者都同步并正常工作。
直接访问域/结帐路径 - 在这种情况下，快速和普通视图不同步。

//主视图

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;
    }
});

使用Backbone中的单个集合呈现2个视图

0 个答案: