2012-02-02 6 views
7

バックボーン0.9.0チェンジは言う:新しいバックボーンビューの 'イベント'ハッシュは、バージョン0.9.0の文字列ではなく関数値でどのように機能しますか?

ビューのイベントはハッシュ今も既存のビューメソッドの文字列名として だけでなく、直接関数値が含まれていてもよいです。

私が次のことを試してみると、イベントの値はundefinedです。

var BB = Backbone.View.extend({ 
    'initialize': function() { 

    this.$el.html('<input type="button" value="Click me!" />'); 
    jQuery('body').html(this.el); 
    }, 

    'events': { 
    'click input[type="button"]': this.buttonClicked 
    }, 

    'buttonClicked': function() { 
    alert('button clicked!'); 
    } 

}); 

window.b = new BB() 

私は新しい機能を誤解していますか?誰かが私の予想とは違う仕組みを説明することができますか?おそらく、定義された時間に 'this'というJavaScriptの構文/値だけがボルケージされています。

、私はまだそれをやってに慣れている方法が動作します:

'events': { 
    'click input[type="button"]': 'buttonClicked' 
}, 

答えて

14

JavaScriptのパーサが、ここで取得すると:

'events': { 
    'click input[type="button"]': this.buttonClicked 
}, 

thisあなたが期待するように、おそらくBBのインスタンスwindowではありません。 windowオブジェクトはbuttonClickedプロパティを持っていません(少なくとも、それはあなたのケースではありません)ので、あなたは本当にこの言っている:

'events': { 
    'click input[type="button"]': undefined 
}, 

をし、あなたの誤差があります。

あなたがdelegateEventsのソースを見れば、あなたは変更履歴が何を意味するのかわかります

delegateEvents: function(events) { 
    // ... 
    for (var key in events) { 
    var method = events[key]; 
    if (!_.isFunction(method)) method = this[events[key]]; 
    // ... 
    } 
}, 

_.isFunction呼び出しがあなたに興味を持っているものであることをあなたはこのようなものを言うことができることを意味します。:

events: { 
    'click input[type="button"]': function() { alert('pancakes!') }, 
    'click button': some_function_that_is_in_scope 
} 

(彼らはアクセスや関数リテラルとしてなら自分の名前のいずれかによって)ですから、eventsルックアップテーブルに定義された関数を置くことができます。

+1

非常に良い、ありがとう。私がこの点で驚いているのは、私が定義した各無名関数(あなたの例の 'パンケーキ'のような)が 'this'という値を持つかどうか、あるいはイベントはです。この行は、View自体にスコープが設定されていることを保証します。method = _.bind(method、this); –

+2

@awcrud:行1078(およびこの例:http://jsfiddle.net/ambiguous/JEavM/1/)は、無名関数がビューにスコープされることを示します。 –

関連する問題