主干：在 fetch() 上没有向模型添加数据

Question

当我尝试从服务器获取数据到我的 Backbone 模型时遇到问题。您从服务器收到JSON 的响应，我认为该响应格式正确。你能看出它有什么问题吗？它看起来像：

[{"id":"1","name":"Fawad Hassan","email":"fawad@test.com"},{"id":"2","name":"Bill 
Gates","email":"bill@test.com"},{"id":"3","name":"Steve 
Jobs","email":"steve@test.com"},{"id":"4","name":"Naveed 
Ahmad","email":"naveed@test.com"},{"id":"5","name":"Mr Zee","email":"zee@test.com"}]

我的 Backbone 项目的代码看起来像这样，我也找不到那里的问题。

window.AppModel = Backbone.Model.extend({
    url: function() {
        return 'http://dev.local/ci/index.php/site/userpost';
    }
});

window.AppContr = Backbone.Collection.extend({
    model: AppModel,
    initialize: function() {
        this.model = new AppModel;
    }
});

window.App = new AppContr({name: "Markus"});

window.AppView = Backbone.View.extend({
    el: $("#content"),
    initialize: function() {
        this.render();
    },
    render: function() {
        console.log(App.model.toJSON());
    }
});

App.model.fetch();
window.View = new AppView;

Answer 1

您正在对模型执行fetch，但返回集合作为响应。这是主要问题。

第二个问题是你在 AppView 上调用render 是完全随机的，即它与model 或collection 没有任何关系。当您渲染视图时，model 中可能没有任何内容。您应该使用bind 将渲染绑定到collection 或model。每次调用 fetch 时，您的视图都会重新渲染，这是 Backbone 的主要优点之一 :)

代码来了:)

window.Person = Backbone.Model.extend({});

window.Addressbook = Backbone.Collection.extend({
    url: 'http://dev.local/ci/index.php/site/userpost',// declare url in collection
    model: Person
}

window.Addresses = new AddressBook();

window.AppView = Backbone.View.extend({
    el: $('#content'),
    initialize: function() {
        Addresses.bind('reset', this.render); // bind rendering to Addresses.fetch()
    },
    render: function(){
        console.log(Addresses.toJSON());
    }
});

window.appview = new AppView();
Addresses.fetch();