Backbone 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 в хеше событий модели. Магистральные модели фактически ничего не делают с хешем событий. Это для делегирования DOM-событий в Backbone Views. Бьюсь об заклад, если вы положили company.on("change", function (model) { console.log(model.toJSON()); }) перед вашим вызовом fetch и удалили обратный вызов успеха, вы увидите свою модель в консоли.

Кроме того, я не думаю, что ваша линия $("#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

OK. Проблема с не обновлением моей модели заключалась в том, насколько я могу сказать проблему асинхронности. Я обновил обратный вызов, чтобы включить параметр данных, как так:

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

}) 

Всем тем, кто обновил мою модель, и переменные, распространяющиеся на шаблон.