Question

我正在研究一些教程代码，就像大多数教程代码一样，“json”对象是通过将其添加为javascript文件中的简单对象而伪造的。我正在尝试从我托管在服务器上的文件中获取JSON。我试图让这更现实一些。尽管如此，我似乎无法使绑定工作。

我的演示代码（我已经工作了），但是javascript中的“json”对象可以在这里看到。

我可以在这里看到我想要的工作。

我的远程json位于此处json file - 如果您“分叉”我的2个小提琴，那么测试工具就在那里进行测试（骨干，下划线，jquery全部在船上）。

我相信我的问题的关键在于“收藏”和使用该收藏品的“视图”。

var Contacts = Backbone.Collection.extend({
    model: Contact,
    url: 'http://sturim.me/contacts.json',
    parse: function(data) {
        return data.objects;
    }            
});

//define master view
var ContactsView = Backbone.View.extend({
    el: $("#contacts"),

    initialize: function() {
        this.collection = new Contacts();
        this.collection.fetch();
        this.render();
    },

    render: function() {
        this.$el.find("article").remove();
        _.each(this.collection.models, function(item) {
            this.renderContact(item);
        }, this);
    },

    renderContact: function(item) {
        var contactView = new ContactView({
            model: item
        });
        this.$el.append(contactView.render().el);
    }

});

Answer 1

首先，由于浏览器安全性重构，第二个jsfiddle不起作用。您无法从jsfiddle内部查询您的个人域名。

其次，在Contacts parse函数中，data是一个包含文件内容的字符串，因此您可以将该响应转换为对象。

parse: function(data) {
    return JSON.parse(data).objects;
}

最后，fetch是一个异步请求，因此您的逻辑将在请求完成之前尝试呈现。您应该根据视图上触发的事件进行渲染。

initialize: function() {
    this.collection = new Contacts();

    // When the contents of the collection are set, render the view.
    this.collection.on('reset', function(){
        this.render();
    }, this);

    this.collection.fetch();
},

Backbone.js获取JSON的麻烦

1 个答案: