Question

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

代码：

模型

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"}

名称和地址始终未定义。我必须忽略一些简单的东西???

修改

包括错误地将模型传递给模板的视图。

查看

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 Models实际上并没有对事件哈希做任何事情。这是为了在Backbone Views上委托DOM事件。我打赌如果你在你的fetch调用之前放company.on("change", function (model) { console.log(model.toJSON()); })并删除成功回调，你会在控制台中看到你的模型。

此外，我认为您的$("#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()));

这样的东西

Answer 2

行。没有更新我的模型的问题是我可以告诉异步问题。我更新了成功回调以包含数据参数，如：

success: function (data) {
    $('#content').html(new CompanyView({
        model: data
    }).el);
}

请注意，我没有将公司对象作为模型而不是原始返回数据传递。这解决了我的模型问题。

我在评论中提到，这是以我的下划线模板变量`＆lt;％= name％＆gt;'开头的等等......空虚。我改变了我的看法：

window.CompanyView = Backbone.View.extend({

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

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

})

那些事情让我的模型更新，变量传播到模板。

Backbone js没有使用fetch（）填充数据模型

2 个答案: