4

productListView画像のリストを含むページがありますproductView。モデルを含むproductListViewコレクションにバインドされます。画像がクリックされると、写真がクリックされた製品に関する詳細を含むモーダルが表示されます。productListproductModalView

問題：ユーザーに転送されるデータを最小限に抑えるために、ページとロードfetch時に製品のいくつかの属性のみが編集されました。内の写真がクリックされたときに、モデルをより多くの属性（非常に長い説明など）でproductListView更新するにはどうすればよいですか？productproductListView

モデル

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は。代わりに保存済みを使用します。successwindowself

于 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 に答える