バックボーンこの混乱

Question

は、私は、次のコードを持っている：

var GoalPanelView = Backbone.View.extend({ 

    // Bind to the goal panel DOM element 
    el: $("#sidebar-goals"),  

    // Initialize the collection 
    initialize: function() { 
     this.collection = Goals; 
     this.collection.bind('add', this.appendItem); 
    }, 

    // Create a new goal when a user presses enter in the enter goal input 
    createOnEnter: function(e) { 
     if (e.keyCode != 13) return; 
     this.addItem(); 
     //Goals.create(this.newAttributes());   
    }, 

    // Add the goal item to the goal list 
    addItem: function() { 
     var goal = new Goal(); 
     goal.set(this.newAttributes()); 
     var goalsElem = this.el; 
     this.collection.add(goal); 
     $(this.el).children("#enter-goal").val(''); 
    }, 

    // Append DOM element to the parent el 
    appendItem: function(item) { 
     var goalView = new GoalView({ 
      model: item, 
     }); 
     $(this.elem).append(goalView.render().el); 
    } 

}); 

私の問題はappendItem関数の内部にあります。 をappendItemの機能の中に使用すると、ではなくthis.collectionを指していると思います。 thisにcollectionではなくGoalPanelViewを参照させるにはどうすればよいですか？ this.elemの内容を保持していたappendItem関数に別の変数を渡そうとしましたが、うまくいかなかったようです。私はcollectionにappendItem機能を移動し、this.collection.bind('add', appendItem);にバインドするために初期化を変更したときに働い

一つのことでしたが、私はcollectionロジックにviewものを入れたくありません。これと同様に、イベントハンドラをバインドする際

Answer 1

あなたはスコープを追加することができます。

this.collection.bind('add', this.appendItem, this); 

範囲は、ハンドラ内thisの値を設定します。あなたの場合は、現在のオブジェクトです。

編集：Javascript Gardenはthis.appendItemが実際に関数自体の範囲を運ばない理由偉大な、について説明があり、それだけで関数ポインタではなく、メソッドポインタです。 Javascriptをの癖の一つ..

編集2あなたはまた、あなたのinitialize方法では、アンダースコアの_.bindAll機能を使用することができますBackbone Reference - Events/on

Answer 2

：今

initialize: function() { 
    _.bindAll(this); 
    this.collection = Goals; 
    this.collection.bind('add', this.appendItem); 
} 

GoalPanelView上の任意のメソッドへの呼び出し（たとえば、 appendItem）は、thisへの参照がGoalPanelViewインスタンスを参照するようにスコープされます。あなたがスコープにGoalPanelView

のすべてのメソッドをしたくない場合は、文字列としてメソッド名のリストを渡すことができます

はこちらをご覧ください：http://underscorejs.org/#bindAll

Answer 3

ただバックボーン0.9のよう（更新します。 2）、これを行うための適切な方法は次のとおりです。

initialize: function() { 
    this.collection.on("add", this.appendItem, this); 
    ... 
} 

があなたのユースケースに応じて、かもしれませんlsoは考慮したい：

initialize: function() { 
    this.listenTo(this.collection, "add", this.appendItem); 
    ... 
}