javascript - Backbone js 不使用 fetch() 用数据填充模型

Question

我正在使用 Backbone.js 并尝试使用 fetch() 填充我的模型。我遇到的问题是返回的数据没有填充我的模型。我发现了类似的问题here 。不同之处在于，在我的 success 函数内部，我没有看到任何数据更改，也没有触发“更改”事件。

代码:

型号

window.Company = Backbone.Model.extend({
    urlRoot: "/api/company",
    defaults:{
        "id":null,
        "name":"",
        "address":"",
        "city":"",
        "state":"",
        "phone":""
    },
    events: {
        'change': 'doChange'
    },

    doChange: function(event) {
        alert('company changed');
    }
})

路由器

var AppRouter = Backbone.Router.extend({

    routes:{
        "":"home",
        "company/:id":"companyDetails"
    },

    initialize:function () {
        var user = new User();
        this.headerView = new HeaderView({
            model: user
        });
        $('.header').html(this.headerView.el);
        console.log("router initialized.");
    },

    companyDetails: function (id) {
        var company = new Company({
            id: id
        });
        company.fetch({
            success: function(){
                console.log('company.id is ' + company.id);
                console.log('company.name is ' + company.name);
                console.log('company.address is ' + company.address);
                $("#content").html(new CompanyView({
                    model: company
                }).el);
            }
        });
}


});

JSON

{"address":"555 Main St","name":"Confused Technologies","id":"8dc206cc-1524-4623-a6cd-97c185a76392","state":"CO","city":"Denver","zip":"80206","phone":"5551212"}

名称和地址始终未定义。我必须忽略一些简单的事情？？？

编辑

包括错误地遗漏了将模型传递给模板的 View 。

查看

window.CompanyView = Backbone.View.extend({

    initialize:function () {
        this.render();
        console.log('CompanyView initialized');
    },

    render:function (eventName) {
        $(this.el).html(this.template());
        return this;
    }

})

Answer 1

属性不直接存储在模型上。它们存储在 attributes hash 中，因此您可以通过 company.attributes 访问它们，尽管 company.get(attribute) 是通常的完成方式。同样，您可以将company.toJSON() 传递给模板函数，因为它返回模型属性的克隆哈希。

至于您的更改事件未触发，我假设您指的是模型事件哈希中的 change: doChange 。主干模型实际上并不对事件哈希做任何事情。这是为了在 Backbone View 上委托(delegate) DOM 事件。我敢打赌，如果您将 company.on("change", function (model) { console.log(model.toJSON()); }) 放在 fetch 调用之前并删除成功回调，那么您' d 在控制台中查看您的模型。

此外，我认为您的 $("#content").html... 行不会像您期望的那样工作。我会像这样重写你的路由器回调:

companyDetails: function (id) {
  var company = new CompanyView({
    el: "#content", 
    model: new Company({ id: id })
  });

  // This line would be better in your view's initialize, replacing company with this.
  company.listenTo(company.model, "change", company.render);

  company.model.fetch();
}

CompanyView#render 通常会将 this.model.toJSON() 传递给返回 html 的模板函数，然后将其传递给 this.$el.html() 。所以类似 this.$el.html(this.template(this.model.toJSON()));