uzyskiwanie danych modelu do widoku backbone.js

Question

Próbuję zrozumieć związek między modelem a widokiem. Próbowałem już zbudować model i wyświetlić, aby renderować ten model.

Otrzymuję błąd Cannot call method 'toJSON' of undefined, który rozumiem jako faktyczne wystąpienie modelu nie jest wysyłane do widoku.

Czuję, że czegoś brakuje w inicjalizacji widoku?

Model:

var sticky = Backbone.Model.extend({ 

defaults: { 
    title:"", 
    content:"", 
    created: new Date() 

}, 

initialize: function() { 
    console.log("sticky created!"); 

} 

}); 

Widok:

var stickyView = Backbone.View.extend({ 

tagName:"div", 
className:"sticky-container", 

initialize: function() { 
    this.render(); 
    console.log("stickyView created!"); 
}, 

render: function() { 
    $("#content-view").prepend(this.el); 
    var data = this.model.toJSON(); // Error: Cannot call method 'toJSON' of undefined 
    console.log(data); 
    var source = $("#sticky-template").html(); 
    var template = Handlebars.compile(source); 
    $(this.el).html(template(data)); 
    return this; 
} 

}); 

Tworzenie nowego modelu i nowe wystąpienie Widok:

var Sticky = new sticky({title:"test"}); 

var StickyView = new stickyView(); 

Answer 1

Trzeba zdać instancji modelu do listy zobacz, Backbone will do the rest:

konstruktor/zainicjować nowy View ([opcje])
Istnieje kilka specjalnych opcji, które, jeśli minął, zostaną dołączone bezpośrednio do pogląd: model, zbieranie, el, id, className, Zmienna i atrybuty.

co oznacza, byś stworzyć swój pogląd jak ten

var StickyView = new stickyView({model: Sticky}); 

A gdy jesteś na nim, można zdać skompilowany szablon i węzeł DOM, który chcesz ustawić jako widok elementu (i usuń tagName i className z definicji widoku), aby uniknąć ścisłe sprzężenie:

var stickyView = Backbone.View.extend({ 

    initialize: function(opts) { 
     this.template = opts.template; 
     this.render(); 
     console.log("stickyView created!"); 
    }, 

    render: function() { 
     var data = this.model.toJSON(); 
     console.log(data); 

     this.$el.html(this.template(data)); 

     return this; 
    } 

}); 

var StickyView = new stickyView({ 
    model: Sticky, 
    el: '#content-view', 
    template: Handlebars.compile($("#sticky-template").html()) 
});