www.webdeveloper.com
Results 1 to 7 of 7

Thread: Mootools 1.3 Classes and Binding

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    27

    Mootools 1.3 Classes and Binding

    I am having trouble accessing both the Class and the current element. How can I have access to both the current element and the Class?


    // Class stuff above
    fuction1 : function () {
    myelements.addEvent('click', this.function2);
    },
    function2 : function () {
    // "this" is the element from function1
    this.getParent('div')

    // now I need to call another function
    // But since the scope is the element, I get an error
    // If I bind function two,
    // how can I gain access to the element?
    this.function3();
    }
    //Class stuff below


    Thanks!

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    "this" will always refer to the object itself, until you create an event handler. "this" in "myelements.addEvent('click', this.function2)" should be the name of the object. In event handlers "this" becomes the target that fired the event handler in the first place.

    IMO, event handlers should be created outside the scope of the object so you don't run into this problem.
    Last edited by jamesbcox1980; 07-15-2011 at 04:19 PM.

  3. #3
    Join Date
    Aug 2010
    Posts
    27
    Thank you for your response.

    So what you are saying is that I should do something like this:

    myClass = new MyClass({})

    myelements.addEvent('click', myClass.function1)

    Should this just go into the bottom of a page? I have about 30 of these addEvents for various elements.

  4. #4
    Join Date
    Dec 2008
    Posts
    488
    Bottom of the page? no, just put that script in an onload event. This would be very easy with jQuery:
    Code:
    $(function () {   //equivalent to $(document).ready or window.onload
        //applies function1() to all elements with this class on the onclick event
        $('.someClass').click(myClass.function1);
    });

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Using a simple bind method, you can ensure "this" refers to the object you expect in event handlers:
    Code:
    Function.prototype.bind = function(context) {
        return function() {
            return this.apply(context, arguments);
        };
    };
    So then:
    Code:
    myelements.addEvent('click', this.function2.bind(this);

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  7. #7
    Join Date
    Aug 2010
    Posts
    27
    Thank you for your response! I hope you have a great Sunday afternoon.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles