想要每次点击发送特定值到JavaScript处理程序

Question

我正在创建多个对象并绑定到相同的处理程序。我的要求是我想发送特定的值来处理它的时间。

代码：

sliderObj = []; 
for(i=0;i<3;i++) 
{ 
    sliderObj[i] = this._turntableSlider = new SliderView(); 
    sliderObj[i].on("change:value", this._handleChangeSpeedSlider); 
} 

当处理器被调用sliderObj [0]要为sliderObj [1]送超值0同样1等

请帮我该怎么做。

Answer 1

尝试使用.bind()：

sliderObj[i].on("change:value", this._handleChangeSpeedSlider.bind(this, i)); 

Simple demo

Answer 2

Prefer listenTo over on。

跑过索引

最简单的解决方案将是回调包装成一个匿名函数。

但是由于我们循环并且i的值将会改变，我们需要创建一个简单的函数，该函数返回一个使用冻结值i的新函数。 （这是类似于使用TJ's bind answer）

function getChangeSpeedHandler(index) { 
    return function() { 
     this._handleChangeSpeedSlider(index); 
    } 
} 

for (i = 0; i < 3; i++) { 
    var slider = sliderObj[i] = new SliderView(); 
    this.listenTo(slider, "change:value", getChangeSpeedHandler(i)); 
} 

传递滑块视图

假设i在处理程序中的值只用于获得正确的sliderObj，你可以直接通过滑块视图。

function getChangeSpeedHandler(slider) { 
    return function() { 
     this._handleChangeSpeedSlider(slider); 
    } 
} 

for (i = 0; i < 3; i++) { 
    var slider = sliderObj[i] = new SliderView(); 
    this.listenTo(slider, "change:value", getChangeSpeedHandler(slider)); 
} 

委派事件处理至滑块视图

如果你要处理的SliderView内变化，它应该处理的事件本身。

this.listenTo(this.model, 'change:value', this.onValueChange); 

触发自定义事件

如果这是真的需要知道滑块的父母和他们的数量是动态的，你可以通过i价值的SliderView，然后它有可能引发自定义事件。

在滑块观点：

var SliderView = Backbone.View.extend({ 
    initialize: function(options) { 
     options = options || {}; 
     this.index = options.index; 
     // ... 
    }, 
    onValueChange: function(model, value, options) { 
     this.trigger('slider:change', value, this.index, this); 
    }, 
}); 

然后在父：

initialize: function() { 
    for (i = 0; i < 3; i++) { 
     var slider = sliderObj[i] = new SliderView({ index: i }); 
     this.listenTo(slider, "slider:change", this._handleChangeSpeedSlider); 
    } 
}, 
_handleChangeSpeedSlider: function(value, index, sliderView) { 
    // handle the change 
}