使用 ajax 获取后，Backbone.js 将集合绑定(bind)到模型

Question

我正在尝试学习backbone.js，但我无法理解如何绑定(bind)模型并在获取后读取它们。
这是我的代码:

$(function() {
    var Bid = Backbone.Model.extend();

    var BidsList = Backbone.Collection.extend({
        model: Bid,
        url: '/buyers/auction/latestBids?auctionId=26&latestBidId=0',
    });         

    var BidsView = Backbone.View.extend({
        el: $('#bids'),
        initialize: function() {
            log('hi');
            _.bindAll(this, 'render');

            this.collection = new BidsList();                   

            this.collection.fetch();
            this.render();
        },
        render: function() {                    
            log(this.collection);

            return this;
        },              
    });

    var bidsView = new BidsView();

});

function log(m) { console.log(m); }

这就是 webservice json 的样子

{
    "AuctionState":3,
    "ClosedOn":null,    
    "Bids":[
        {
            "BidId":132,            
            "AuctionId":26      
        },
        {
            "BidId":131,
            "AuctionId":2           
        }
    ]
}

我如何将该响应绑定(bind)到模型？

Answer 1

您需要覆盖 BidCollection 上的 parse() 方法，以将 Bids 拉出并将它们呈现给集合的 add() 例程，并且仅将它们呈现给集合的 add() 例程。您可以使用 parse() 方法执行其他操作来管理 AuctionState 字段。

您还需要在 View 中监听“更改”事件，以便 View 在获取后自动更新。您不需要在 View 中调用 render() ；您应该将模型的“更改”事件绑定(bind)到 render()，然后获取数据并让它触发渲染。

与往常一样，Backbone 的源代码具有很高的可读性。我建议学习和理解它。

例如:

var BidsList = Backbone.Collection.extend({
    model: Bid,
    url: '/buyers/auction/latestBids?auctionId=26&latestBidId=0',
    parse: function(response){
        return response.Bids;
    }
});