Проблема привязки событий Mootools и вызова методов класса - PullRequest
Новая
       12

Проблема привязки событий Mootools и вызова методов класса

1 голос
/ 23 апреля 2011

То, что я пытаюсь сделать, - это сочетание класса MooTools и Рафаэля. Я думаю, что проблема в основном связана с привязкой событий mootools. Я пытаюсь добавить событие к элементу Raphael (dom node) и при его запуске должен быть вызван другой метод класса. Это не проблема при кодировании без класса 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'));
        },      

    ...

    });

Ответы [ 2 ]

2 голосов
/ 23 апреля 2011

ваш .each неправильный. 

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

}, bind);

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

хотя у вас фактически есть этот объект в качестве массива, не заметил :) 

Array.each(function(el, index) {

}, bind);

когда вам нужно this для привязки к элементу при нажатии, это нормально.просто сохраните копию this в self и вместо этого позвоните self.info().в качестве альтернативы, вместо этого оставьте привязку и ссылку e.target в качестве элемента триггера, в то время как this является вашим экземпляром

, хотя может показаться, что попытка удержать this привязанной к классу везде, где это возможно,Разработчики mootools-core предпочитают способ var self = this;, так как он избегает дополнительного обратного вызова для привязки и т. д. (посмотрите на источник mootools, очень часто встречающийся)

также, скажем, вы хотите, чтобы событие click переходило кпрямой метод:

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

, который отправит событие в качестве 1-го аргумента в информацию (так что ссылка на event.target).

1 голос
/ 23 апреля 2011

bind обычно может применять аргументы, а также область (в зависимости от реализации), и это позволяет вам написать function (raphaelObj, node) { ... }.bind(null, this, item.gfx.node), чтобы связать два аргумента.

...