ES6 Execute a function on a click event

Question

This is a small chunk of my code. The problem is about this. The code below "this" refers to HomeView class because I did this._changeLanguage.bind(this). If I remove the bind(this) part then this refers to li element but then I cannot call this._renderHTML() method.

class HomeView extends BaseView{

    constructor(model){
        super(null, model);
    }

    _renderHTML(){
        this.$view.html(template(this.model));
        return this.$view;
    }

    _init(){
        this.$view.on("click", "#langs li", this._changeLanguage.bind(this));
    }

    _changeLanguage(){
        console.log($(this).data("lang"));
        this._renderHTML();
    }

}

What is the cleanest approach to run _changeLanguage method on a click event like this.

I usually use the methods with arrow function, if using babel. [Example](https://babeljs.io/docs/plugins/transform-class-properties/#example) — Bhavik, Dec 24 '16 at 18:59
See also [ES6 acces to 'this' with 'addEventListener' applied on method](http://stackoverflow.com/q/30446622/3853934). — Michał Perłakowski, Dec 24 '16 at 19:04

score -1 · Answer 1 · answered Dec 24 '16 at 18:59

You should be able to write your _changeLanguage() method as such: class HomeView extends BaseView {

    _changeLanguage = () => {
        console.log($(this).data("lang"));
        this._renderHTML();
    };
}

The fat-arrow syntax gives you implicit binding on this, so you can change your other code to:

_init(){
    this.$view.on("click", "#langs li", this._changeLanguage);
}

Therefore no more bind()... it's all implicit thanks to ES6.

ES6 Execute a function on a click event

1 Answers1