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

}) 

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