4

我有一个包含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();
        }
    });
4

2 回答 2

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 不能为您提供所有信息，则将 fetch 替换为 ajax 调用。

关于您的更新：this在success回调上下文中是window. 您想改用保存的self。

于 2012-09-04T21:44:35.553 回答
1

在此代码中，您应该使用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();
    }
});
于 2012-09-05T07:38:29.753 回答