Accéder à l'attribut d'une classe

Bonjour à tous,

Je suis en train de développer une application mobile 100% javascript. Grâce aux tutoriels de grafikart, j'ai créé une classe que je vais minimiser ici :

var app = function() {
    this.id_user = 0;
    this.set_refresh_app = function() {
        var nav = document.getElementsByClassName('nav');
        for(var i = 0; i < nav.length; i++) {
            nav[i].onclick = function() {
                this.id_user = 1;
            }
        }
    }
}
window.onload= function() {
    var execute = new app;
    execute.set_refresh_app();
}

Comme vous pouvez le voir dans la class, lors du clic sur un des éléments "nav", l'id_user est redéfini à 1.

this.id_user = 1

Cependant, vu que je me trouve dans la fonction onclick(), le this ne fonctionne pas ... il s'agit du this du onclick et non de la classe. Savez-vous comment accéder à l'attribut de la classe ?

Merci d'avance
[/i]
Modifié par Gaylord.P (17 Aug 2014 - 10:07)

salut,
il suffit de dire que le "this" ne se réfère pas à ce à quoi il devrait se référer naturellement mais à l'objet crée. Cela se fait avec ".bind".

var app = function() {
    this.id_user = 0;
    this.set_refresh_app = function() {
        var nav = document.getElementsByClassName('nav');
        for(var i = 0; i < nav.length; i++) {
            nav.onclick = function() {
                this.id_user = 1;
            }.bind(this);
        }
    }
}
window.onload= function() {
    var execute = new app;
    execute.set_refresh_app();
}

Certains vieux navigateurs ne reconnaissent pas mais il y a une façon de fixer ça

Function.prototype.bind || (Function.prototype.bind = function (b) {
    var d = Array.prototype.slice.call(arguments, 1),
        e = this,
        a = function () {},
        c = function () {
            return e.apply(this instanceof a && b ? this : b, d.concat(Array.prototype.slice.call(arguments)));
        };
    a.prototype = this.prototype;
    c.prototype = new a;
    return c;
});

Maintenant, si tu comptes l'utiliser une seule fois, tu peux simplifier avec par exemple

var app = function() {
    this.id_user = 0;
    this.set_refresh_app = function() {
        var nav = document.getElementsByClassName('nav');
	 (function (that){
	        for(var i = 0; i < nav.length; i++) {
	            nav.onclick = function() {
	                that.id_user = 1;
	            };
	        }
	 })(this);
    }
}
window.onload= function() {
    var execute = new app;
    execute.set_refresh_app();
}

ou le code qui t'a été proposé.

PS: je n'ai rien testé et j'écris de tête.