モデルデータをビューbackbone.jsに取得する

Question

モデルとビューの関係を理解し​​ようとしています。私は、そのモデルをレンダリングするためにモデルを構築し、表示することを試みました。

モデルの実際のインスタンスがビューに送信されていないため、私が理解しているエラーCannot call method 'toJSON' of undefinedが表示されます。

ビューの初期化に何か不足がありますか？

モデル：

var sticky = Backbone.Model.extend({ 

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

}, 

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

} 

}); 

ビュー：ビューの新しいモデルと新しいインスタンスを作成し

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

}); 

：

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

var StickyView = new stickyView(); 

Answer 1

あなたがにあなたのモデルインスタンスを渡す必要があります表示、Backbone will do the rest：

コンストラクタ/新しいビュー（[オプション]）を初期化する
、渡された場合、 ビューに直接接続されるいくつかの特別なオプションがあります：モデル、コレクション、エル、ID、クラス名、tagNameにと は、属性。あなたはこの

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

のようなあなたのビューを作成しますそして、あなたはそれでいる間、あなたはあなたのビュー要素としてコンパイル済みのテンプレートと設定したいDOMノードを渡すことができます意味

（と厳格なカップリングを避けるために）あなたのビュー定義からtagNameとclassNameを削除：今

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