Using jQuery with classes from ES6

Question

I just faced a little problem with my new project. Basically, there is a post page and some comments coming from back-end as part of page. All I want to do is to provide some JavaScript logic for these. What I've done is provided:

class Comment {
    constructor(comment) {
        console.log("Creating comment object...");
        $(comment).find(".vote").click(this.toggle_vote);
        $(comment).find(".action.reply").click(this.toggle_reply);
    }

    toggle_vote() {
        // Context here is `span.reply`, not Comment instance,
        // but I want to access class members
        if ($(this).is(".voted")) {
            $(this).removeClass("voted");
            return;
        }

        $(this).addClass("voted");
        $(this).siblings().first().removeClass("voted");
    }

    // ...
}

The problem below lies in jQuery callback style. When I pass class member to jQuery callback, on the call, jQuery mocks its context, so this is span.reply, not Comment instance. The point is I want to be able to reach actual Comment instance.

Disclaimer: I am not front-end guy at all, so I might need some rigid explanation to solution of this problem, thanks!

Btw, your `toggle_vote` function does seem to expect that `this` is the DOM element? — Bergi, Apr 03 '15 at 11:32
@Bergi well, it does atm, but I'd like it to behave another way. I heard about "=>" syntax in ES6, is it going to work here? — Ian P Badtrousers, Apr 03 '15 at 11:40
Yes, you can use `….click((e) => this.toggleReply(e.currentTarget))` or so. — Bergi, Apr 03 '15 at 12:47

score 1 · Accepted Answer · answered Apr 03 '15 at 11:29

1

You can define the this-object for a function using .bind

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

In your case

.click(this.toggle_vote.bind(this))

answered Apr 03 '15 at 11:29

Johannes Reuter

3,501
19
20

Can I bind it with ES6 "=>" syntax, like: `.click((event) => this.toggle_vote)`? – Ian P Badtrousers Apr 03 '15 at 11:41

Using jQuery with classes from ES6

1 Answers1