骨干js不使用fetch填充数据模型（）

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 Views上委派DOM事件。我敢打赌，如果您在获取调用之前放入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＃渲染通常会通过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); 
} 

注意，我没有通过公司的对象为模型，而原始返回的数据。这解决了我的模型问题。

我在评论中提到，这开始于我的下划线模板变量'<％= name％>'等...是空的。我改变了我的看法：

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

}) 

那些事情得到了我的模型更新和变量传播到模板。