Use a variable on Backbone.history.navigate in backbone view

Question

how to use a variable on Backbone view ?

If i work like this (below)... This does not work.

App.Views.Incentive = Backbone.View.extend({

        el: $('#projet-page'),
        name: "Incentive",
        initialize: function () {
            "use strict";
            $('section[data-projet-page="' + this.name + '"] a.OpenGalerie').on('click', this.enterGalerieClick);
        },
        enterProjectClick: function () {
            Backbone.history.navigate('!/case-projet/' + this.name + '/Galerie'),
            $('section[data-projet-page="' + this.name + '"]').css('display', 'block'),
        },

    });

i have :

domain:9000/#!/case-projet//Galerie instead of domain:9000/#!/case-projet/Incentive/Galerie

Answer 1

You can solve the immediate problem by using underscore's bind method (see documentation) to ensure that this in the click handler refers to the Backbone view and not the element you've bound the handler to:

App.Views.Incentive = Backbone.View.extend({

        el: $('#projet-page'),
        name: "Incentive",
        initialize: function () {
            "use strict";
            $('section[data-projet-page="' + this.name + '"] a.OpenGalerie').on('click', _.bind(this.enterGalerieClick, this));
        },
        enterProjectClick: function () {
            Backbone.history.navigate('!/case-projet/' + this.name + '/Galerie'),
            $('section[data-projet-page="' + this.name + '"]').css('display', 'block'),
        },

    });