nhận dữ liệu mô hình cho chế độ xem backbone.js

Question

Tôi đang cố gắng hiểu mối quan hệ giữa một mô hình và chế độ xem. Tôi đã thử xây dựng mô hình và chế độ xem để hiển thị mô hình đó.

Tôi gặp lỗi Cannot call method 'toJSON' of undefined mà tôi hiểu là phiên bản thực tế của mô hình không được gửi đến chế độ xem.

Tôi cảm thấy có điều gì đó bị thiếu trong quá trình khởi tạo chế độ xem?

Model:

var sticky = Backbone.Model.extend({ 

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

}, 

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

} 

}); 

The View:

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

}); 

Tạo mô hình mới và thể hiện mới của quan điểm:

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

var StickyView = new stickyView(); 

Answer 1

Bạn phải vượt qua dụ mô hình của bạn để bạn xem, Backbone will do the rest:

constructor/khởi mới View ([tùy chọn])
Có một số tùy chọn đặc biệt, nếu được thông qua, sẽ được gắn trực tiếp vào quan điểm: mô hình, bộ sưu tập, el, id, className, tagname và thuộc tính.

có nghĩa là bạn sẽ tạo ra tầm nhìn của bạn như thế này

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

Và trong khi bạn đang ở đó, bạn có thể vượt qua mẫu biên soạn của bạn và nút DOM bạn muốn thiết lập như là yếu tố tầm nhìn của bạn (và loại bỏ các tagName và className từ định nghĩa khung nhìn của bạn) để tránh một khớp nối chặt chẽ:

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