Question

我有一个包含图片productListView列表productView的页面。 productListView绑定到包含模型productList的集合product。单击图像后，会出现一个模式ModalView，其中包含有关已单击其照片的产品的更多详细信息。

问题：为了最大限度地减少传输给用户的数据，在页面加载fetch时，只有少数产品属性为productListView。如果点击product中的照片，我应该如何更新模型productListView以及更多属性（如非常长的描述）？

模型

Product = Backbone.Model.extend({
    url: '/api/product'  // Gets FULL details of product
});

集合

ProductCollection = Backbone.Collection.extend({
    url: '/api/products'  // Gets MINIMAL details of product
})

查看

ProductListView = Backbone.View.extend({
    el: '#photo_list',

    initialize: function() {
        this.collection.bind('reset', this.render, this);
    },

    render: function() {
        this.collection.each(function(photo, index) {
            $(this.el).append(new ProductView({ model: photo }).render().el);
        }
        return this;
    },
});


ProductView = Backbone.View.extend({
    tagNAme: 'div',

    template: _.template( $('#tpl_ProductView').html() ),

    events: {
        'click .photo': 'showModal',
    },

    render: function() {
        $(this.el).html( this.template( this.model.toJSON() ) );
        return this;
    },

    // Creates the Modal View with FULL details of the product
    showModal: function() {
        modalView = new ModalView({ model: this.model });
    }
});

模态视图

ModalView = Backbone.View.extend({
    el: $('#modal'),

    template: _.template( $('#tpl_modal').html() ),

    initialize: function() {
        this.render();
    },

    render: function() {
        $(this.el).show().append( this.template( this.model.toJSON( this.model ) ) );
    },

});

更新

我收到错误Uncaught TypeError: Object [object Window] has no method 'render'。即使我使用_.bindAll绑定render，为什么会这样呢？我知道var self=this会有效，但为什么不_.bindAll？

initialize: function() {
    _.bindAll(this, 'render');
    var self = this;
    // Update Model with Full details
    this.model.fetch({
        data: {post_id: this.model.get('id')},
        processData: true,
        success: function() {
            // The usual renders

            this.render();
        }
    });

Answer 1

如果您的Product.fetch调用获取完整模型（使用扩展属性），则更改showModal以执行此操作，然后呈现：

showModal: function() {
    var modalView = new ModalView({ model: this.model }),
        p = this.model.fetch();
    p.done(modalView.render);
}

和

ModalView = Backbone.View.extend({
    el: $('#modal'),

    template: _.template( $('#tpl_modal').html() ),

    render: function() {
        this.$el.show().append( this.template( this.model.toJSON() ) );
    },

});

如果fetch没有为您提供所有内容，那么请使用ajax调用替换fetch。

关于您的更新：this回调上下文中的success是window。您想要使用已保存的self。

Answer 2

在此代码中，您应使用self.render();代替this.render()

initialize: function() {
  _.bindAll(this, 'render');
  var self = this;
  // Update Model with Full details

  this.model.fetch({
    data: {post_id: this.model.get('id')},
    processData: true,
    success: function() {
        // The usual renders
        self.render();
    }
});

更新具有更多属性的模型（backbone.js）

更新

2 个答案: