0

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

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

有效的jsfiddle

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

没有的jsfiddle

我的远程 json 位于此处的json 文件——如果你“分叉”我的 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);
    }

});
4

1 回答 1

2

首先，由于浏览器安全重构，第二个 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();
},
于 2012-10-09T04:04:04.193 回答