2

このjsFiddleを見てください

コードも以下に示します。

window.MyView = Backbone.View.extend({

ticks: 0,
initialize: function() {
    //window.setInterval(this.onTimerTick, 1000); // arghhh.. can't understand the 'this' scoping       
    window.setInterval(this.onTimerTick2, 1000);  // Works great with globals       
},

render: function() {
    this.$el.text(this.ticks);            
},

onTimerTick: function() {  // Trouble with this
    this.ticks++;
    this.render();
},

onTimerTick2: function() {  // Using globals
    window.ticks2++;
    $('#count').text(window.ticks2);
}
});

window.My = new MyView({ el: $("#count") });
window.ticks2 = 0;

コードを見ると、onTimerTick 関数を使用したいことがわかりますが、window-this から My-this に到達する方法がわからないため、onTimerTick2 に見られるアプローチを使用する必要があります。(通常、私は that=this で回避しますが、この場合は十分ではありません)

私にこれを理解させようとしてくれてありがとう(!)

ありがとう

ラルシ

4

3 に答える 3

2

this.onTimerTick2setTimeout に渡すと、関数はthis自分のオブジェクトではなくグローバル オブジェクトにバインドされて呼び出されます。

underscore.js が利用可能な場合 (@ori によると)、呼び出されたときに正しいオブジェクトに_.bind()ロックするために使用できます。this

window.setInterval(_.bind(this.onTimerTick, this), 1000);

ライブラリに依存しないいくつかのソリューションを次に示します。

// Works in all browsers
var self = this;
window.setInterval(function() {
    self.onTimerTick();
}, 1000);

最新のJSエンジンを使用Function.bind()すると、正しいを維持するためにも使用できますthis:

// Requires a modern JS engine
window.setInterval(this.onTimerTick.bind(this), 1000);
于 2012-05-02T07:17:48.893 に答える
0

_.bindAllコードをよりクリーンで再利用可能な状態に保つために、ユーティリティ メソッドを利用することもできます。

initialize: function() {
    _.bindAll(this, 'myFunction')
    setInterval(this.myFunction, 1000)
},

myFunc: function() {
    console.log(this)
}
于 2012-05-02T10:09:01.667 に答える
0

バックボーンはアンダースコアのバインド機能を使用しているように見えるので、次のようになります。

 window.setInterval(_.bind(this.onTimerTick2, this), 1000);
于 2012-05-02T07:19:38.077 に答える