バックボーンthis.modelは定義されていません、なぜですか？

Question

私はどこでも答えを探しましたが、私が見つけたものには満足していませんでした。

問題は、Addy Osmaniのバックボーンで「Todo」アプリケーションを作成するチュートリアルですが、コンソールを見ると、this.model is undefinedというエラーが表示されます。

私はこのSOの答えを試したこともありますBackbone model error displayed in console、しかし私はまだ同じエラーが発生します。何が間違っているか教えてください。

ところで、this.modelまたはthis.collectionとは何ですか？私は彼らがBackbone.ModelとBackbone.Collectionを参照しているという考えを持っていますが、どのように機能しますか？他のチュートリアルでthis.collectionとthis.model.modelsも定義されていないので、私はModelとCollectionを明確に定義しているので、私はこれを求めています。

多くのおかげ

JS：

//Model 
var Todo = Backbone.Model.extend({ 

    defaults: { 
    title: 'Enter title here', 
    completed: true 
    }, 

    validate: function(attrs) { 
    if (attrs.title === undefined) { 
     return 'Remember to enter a title'; 
    } 
    }, 

    initialize: function() { 
    console.log('This model has been initialized'); 

    this.on('change:title', function() { 
     console.log('-Title values for this model have changed'); 
    }); 

    this.on('invalid', function(model, error) { 
     console.log(error); 
    }); 
    } 
}); 

//View 
var TodoView = Backbone.View.extend({ 

    el: '#todo', 
    tagName: 'li', 
    template: _.template($('#todoTemplate').html()), 

    events: { 
    'dbclick label': 'edit', 
    'click .edit': 'updateOnEnter', 
    'blur .edit': 'close' 
    }, 

    initialize: function() { 
    _.bindAll(this, 'render'); 
      this.render(); 

    }, 

    render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    this.input = this.$('.edit'); 
    console.log(this.model.toJSON()); 
    return this; 
    }, 

    edit: function() { 
    //do something... 
    }, 

    close: function() { 
    //do something... 
    }, 

    updateOnEnter: function() { 
    //do something... 
    } 
}); 

var todoview = new TodoView(); 
console.log(todoview.el); 

//Collection 
var TodoList = Backbone.Collection.extend({ 
    model: Todo 
}); 

Answer 1

あなたはModelまたはCollectionをインスタンス化し、あなたのビューにそれを渡す必要があります。それ以外の場合、レンダリングメソッドがTodoViewで呼び出されると、this.modelはnullになります。あなたは（Collectionある）ドスを変更することができ、以降はその時点から

//Collection 
var TodoList = Backbone.Collection.extend({ 
    model: Todo 
}); 

var todos = new TodoList(); 

var todoview = new TodoView({model: todos}); 

とあなたのビューがトドスイベントに耳を傾けることができます。

たとえば、次のようにあなたのコードの最後の数行を再配置してみてくださいそれに応じて再レンダリングします。

Answer 2

あなたは言っていませんが、render（）メソッドでエラーが発生していると思います。

新しいタイプのモデル（var Todo = Backbone.Model.extend({...）を定義することはできますが、それをインスタンス化することはできません。また、モデルをtodoviewコンストラクタに渡すこともありません。

だから、非常に少なくとも、あなたがする必要があります。

var todomodel = new Todo(); 

var todoview = new TodoView({ 
    model: todomodel 
}); 

Answer 3

は、他の問題の答えは、あなたの質問への答えです：あなたはビューをインスタンス化するときには、ビューにモデルを渡していません。

var model = new Todo(); 
var todoview = new TodoView({model: model}); 

オブジェクトをビューのコンストラクタに渡すと、特定のキーが検索され、直接ビューにアタッチされます。

Backbone's sourceをご覧になり、viewOptionsを検索すると分かります。

これは、this.modelとが自動的にビューのthisに添付される方法です。