Bir bakışa veri almak için backbone.js

Question

Bir model ve bir görünüm arasındaki ilişkiyi anlamaya çalışıyorum. Bir model oluşturmayı denedim ve bu modeli oluşturmak için görüntüleyin.

Modelin gerçek örneğinin görünüme gönderilmediğini anladığım Cannot call method 'toJSON' of undefined numaralı hatayı alıyorum.

Görünümün başlatılmasında eksik bir şey olduğunu hissediyorum.

Model:

var sticky = Backbone.Model.extend({ 

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

}, 

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

} 

}); 

Görünüm:

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

}); 

bakış yeni model ve yeni bir örneğini oluşturma: için model örneği geçmek zorunda

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

var StickyView = new stickyView(); 

Answer 1

senin görüntüleme, Backbone will do the rest:

yapıcı/ yeni görünümü birkaç özel, geçtiyseniz, doğrudan görünümü eklenecektir seçenek vardır
([seçenekler]) başlatmak: Model, koleksiyon, el, id, className, tagName ve Öznitellikler. Bu

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

gibi görünümünüzü yaratacak Ve bunu yaparken, kendi derlenmiş şablonu ve size bakış unsuru olarak ayarlamak istediğiniz DOM düğümünü geçebileceği anlamına gelir

(ve sıkı bağlantı önlemek için görünüm tanımını tagName ve className) kaldırın:

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