Question

包含模型

Item = Backbone.Model.extend({....})
Apvdtl = Backbone.Model.extend()

和一个集合

Apvdtls = Backbone.Collection.extend({
    model: Apvdtl
})

并使用Apvdtl Model填充集合 e.g。

apvdtls.add([{ itemid: 'c4676cef679a11e28b7a3085a942bd8e', qty: 10 }, 
             { itemid: '1da17339690f11e285d63085a942bd8e', qty: 5 }])

并生成此视图

grid1

但是我想要做的就是制作一个像这样的视图

grid2

通过在此JSON File

上提取带有ID的项目

ApvdtlView = Backbone.View.extend({
    tagName: 'tr'
    initialize: function(){
        this.model.on('change', this.render, this);
        this.template = _.template('<td><%=itemid%></td><td><%=qty%></td>');
    },
    render: function(){

        item.set({'id': this.model.get('itemid')});
        // item = {id: 'c4676cef679a11e28b7a3085a942bd8e'}

        item.fetch(); // but this doesnt get the data
        // this should contain this data after i fetch 
        // item = {"id": "c4676cef679a11e28b7a3085a942bd8e",
        //         "code": "prp125", "descriptor": "Paper", "price": "7.00"}

        // build new data to render
        var data = {
            "itemid": item.get('descriptor'),
            "qty": this.model.get('qty')
        }

        this.$el.html(this.template(data));
        //this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

Answer 1

首先 Ajax是Async 。因此，您永远不知道响应何时返回，因此最好将其附加到事件中。

ApvdtlView = Backbone.View.extend({
    tagName: 'tr',
    initialize: function () {

            // This listens to the sync and change event and renders the item
        this.listenTo(this.model, 'change sync', this.render);
        this.template = _.template('<td> <%=itemid%> </td>' +
            '<td><%=qty%></td>');
        this.model.fetch();

    },
    render: function () {

        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

必须为模型url设置下一个ApvdtlView属性，因为它是从服务器获取的。

接下来，您无法从您的域中点击此网址

urlRoot: 'https://raw.github.com/jrsalunga/prism2/master/www/api/item.json'

因为它违反了交叉来源政策，所以它是一个不同的域名。您需要使用jsonp来获取此

<强> Check Fiddle

<强> JSONP request Fiddle

现在您可以看到在网络选项卡中提取的数据，但由于必须在服务器端处理回调，因此会抛出错误

模型添加到集合时的骨干提取和重置模型

1 个答案: