bindWithEvent mootools 1.3

时间:2010-11-23 19:25:35

标签: event-handling mootools

我需要从mootools 1.2到1.3隐藏此代码

var SomeClass = new Class({
 initialize: function (els) {
  for (var i = 0; i < els.length; i++) {
   els[i].addEvent('click',
    this.alert.bindWithEvent(this, [i, els[i].get('text')])
   );
  }
 },

 alert: function (event, index, text) {
  alert(
   index + ' -> ' + text + ' | ' +
   'x:' + event.page.x + ', y:' + event.page.y
  );
 }
});

这是工作版本(1.2)http://jsfiddle.net/9Pn99/
这是1.3 http //jsfiddle.net/9Pn99/1 /

的版本

编辑: 我想出了如何做到这一点,关闭。 http://jsfiddle.net/9Pn99/4/

for (var i = 0; i < els.length; i++) {
    (function (j) {
        els[i].addEvent('click',
            function (e) {
                this.alert(e, j);
            }.bind(this)
        );
    }.pass([i], this))();
}

有更好的解决方案吗?

EDIT2:我找到了另一种简单的方法:

els.each(function (el, i) {
    els[i].addEvent('click',
        function (e) {
            this.alert(e, i);
        }.bind(this)
    );
}, this);

看起来我在一个人说话。

3 个答案:

答案 0 :(得分:1)

最简单的解决方案是在方法中反转参数:)所以如果你有这样的方法

function (e, a){}.bindWithEvent(this, [i, els[i].get('text')])

function (a, e){}.bind(this, [i, els[i].get('text')])

因为事件总是最后一个参数。

答案 1 :(得分:0)

答案 2 :(得分:0)

根据您发布的内容:http://jsfiddle.net/dimitar/9Pn99/5/

var SomeClass = new Class({
    initialize: function (els) {
        els.each(function(el, i) {
            el.addEvent("click", function(e) {
                this.alert(e, i);
            }.bind(this));
        }, this);
    },

    alert: function (event, index) {
        alert(
            index + ' | ' +
            'x:' + event.page.x + ', y:' + event.page.y
        );
    }
});

new SomeClass($$('li'));

每个循环都为您提供了一个可以显示的自然运行时索引(与引用最终达到设定值的单个变量的循环相反)。

如果你看一下mootools标签列表,第一页上有3或4个关于替换bindWithEvent的问题,以及2关于循环元素上回显'then'变量状态的问题。对于后者,您还可以创建闭包和各种类型。

玩得开心:)