0

Below is an error I am getting from binding "this" to a click event in javascript. The format of the js is Jaml/Mooml and may be unfamiliar to some but I assure you the syntax is proper. I have been binding "this" to many events in the same way and this is the first time I have seen this error so I am hoping some mootools, jaml or javascript expert will be able to derive a solution from the error and code below.

Uncaught TypeError: Object [object Object] has no method 'get'
Mooml.engine.tags.div.Mooml.engine.tags.div.events.click:relay(a)
bubbleUpmootools-core-1.4.1.js:3948
delegation.addEvent.delegatormootools-core-1.4.1.js:4078
defn

here is the Jaml...

    'main': new Mooml.Template(null, function(data) {
        div({'class': 'lists container'},
            div({
                'class': 'sources',
                'events': {
                    'click:relay(a)': function(event) {
                        event.preventDefault();

                        new Resource({
                            'url': this.get('href'),
                            'method': 'FRIENDS',
                            'query' : {
                                'source': this.dataset.source
                            },

                            'onSuccess': function(response) {
                                console.log(response);
                                //this.renderTemplate('friends', response.mv, this);

                            }.bind(this),

                            'onFailure': this.onFailure

                        }).send();

                    }.bind(this)
                }
Alberto De Caro
  • 5,147
  • 9
  • 47
  • 73
a11hard
  • 1,904
  • 4
  • 19
  • 41
  • 1
    You say the syntax is correct but aren't you missing a closing `);`? – Hogan Dec 27 '11 at 16:22
  • 2
    What `this` references in the main function? I mean, what `console.log(this)` gives you if you place it just before the 2nd `div()` call (line #3)? – lorenzo-s Dec 27 '11 at 16:23

1 Answers1

4

Add var self = this; before your code and then use self instead of this in the callback functions.

Also have a look at http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ and http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/ to learn more about how this works.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • thanks, that made me look at my resource call a little closer. I found the solution! Change this.get to event.target.get – a11hard Dec 27 '11 at 16:26
  • 1
    @Adgezaza Can you share the solution (or where the problem was) with us? – lorenzo-s Dec 27 '11 at 16:30
  • can't answer my own question for another 7 hours. but just added the comment above. – a11hard Dec 27 '11 at 16:30
  • 2
    @Adgezaza Using `event.target.get` is good and clever, however this does not tell us why your code was not working... Probably `this` was not referencing the `
    ` created in the `div()` call, so the missing reference is "propagated" using `.bind(this)`. That's the reason I ask you to check `console.log(this)` in the first lines of your code.
     – lorenzo-s Dec 27 '11 at 16:33
  • @lorenzo-s this was referring to the front end javascript controller which is the parent to the class where the snippet is taken from that I have built that contains a bunch of helper functions like the renderTemplate from the mooml class. – a11hard Dec 27 '11 at 16:37
  • @Adgezaza Ok, so the problem was exactly there. Since `this` is not referencing to the element you want, `bind(this)` will simply bind what `this` refers to the inner functions. If you do not have a reference to created elements, you cannot use `bind()` to bind it to inner functions. Bye! – lorenzo-s Dec 27 '11 at 16:42