Question

我要做的是结合使用mootools类和raphael。我得到的问题主要是mootools事件绑定我猜。我正在尝试将事件附加到raphael元素（dom节点），并且在触发事件时应该调用另一个类方法。没有mootools类编码时没问题。但这种（正确的）方式我有一些问题。绑定事件时，raphael元素不能再使用了，因为“this”现在指的是mootools类。

请看一下这段代码，我想你会明白我的问题是什么：

    // mootools class 
    var test = new Class({

    ...

        initPlane: function() {

            // just an JSON object array
            this.objects = [{"pid":"2","sx":"685","sy":"498","dx":"190","dy":"540"},{"pid":"3","sx":"156","sy":"341","dx":"691","dy":"500"}]; 

            // place the objects on stage and append some events to them
            this.objects.each(function(item, idx){                      
                item.gfx = this.gfx.image("assets/img/enemy.png", item.sx, item.sy, 32, 32);


                // #### differnt approaches to bind the events. all not working

                // first attempt with mootools event
                item.gfx.node.addEvent('click', function(e) {
                    console.log(this.attr('x'));    // not working because this is bound to the class i guess
                    this.info();
                }.bind(this));          

                // second attempt with mootools event
                item.gfx.node.addEvent('click', function(e) {
                    console.log(this.attr('x'));    // not working
                    parent.info(this);              // no binding and not working
                });         

                // first attempt with raphael event
                item.gfx.click( function(e) {
                    console.log(this.attr('x'));    // works !
                    this.info(this);                // not working because this refers to raphael element. 
                });         



            }.bind(this))

        },


        // this method should be called after click event and output element attribs
        info: function(event) {
            console.log(event.attr('x'));
        },      

    ...

    });

Answer 1

你的.ee是错的。

Object.each(obj, function(el, key, obj) {

}, bind);

http://mootools.net/docs/core/Types/Object#Object:Object-each

虽然你实际上有this.objects作为数组，但没有注意到：）

Array.each(function(el, index) {

}, bind);

当您需要this在点击时绑定到元素时，这很好。只需将this的副本存储到self，然后再拨打self.info()。或者，保持绑定和引用e.target作为触发元素，而this是您的实例

尽管尝试尽可能地将this绑定到类似乎“更整洁”，但是mootools-core devs倾向于更喜欢var self = this;方式，因为它避免了额外的回调绑定等（看看mootools的来源，很常见）

另外，假设您希望将click事件直接转到某个方法：

element.addEvent("click", this.info.bind(this));

将事件作为第一个参数发送到info（所以引用event.target）。

Answer 2

bind通常可以应用参数和范围（取决于实现），并且允许您编写function (raphaelObj, node) { ... }.bind(null, this, item.gfx.node)来绑定两个参数。

绑定Mootools事件和调用类方法的问题

2 个答案: