Problème d'impression des tableaux dans ember.js

Question

Je vois quelque chose de bizarre lorsque j'essaie d'inclure la bibliothèque ember.js (ember-1.0.0-rc.7.js).

Le javacode que j'ai ne fait qu'imprimer un tableau javascript :

<script type="application/javascript">
var songs = [ 'a','b','c'];

console.debug(songs.toString());
for(key in songs)
{
    console.debug(songs[key]);
}

</script>

Si je n'inclus pas la bibliothèque, a, b, c s'affiche dans la console. Cependant, lorsque je l'inclus, il commence à imprimer a, b, c, mais aussi toutes les fonctions à...

Exemple :

function (idx) {
    return this.objectAt(idx);
  }
function superWrapper() {
    var ret, sup = this._super;
    this._super = superFunc || K;
    ret = func.apply(this, arguments);
    this._super = sup;
    return ret;
  }
function (key) {
    return this.mapProperty(key);
  }

Y a-t-il une raison pour laquelle cela se produit avec la bibliothèque ember.js, et comment puis-je résoudre ce problème ?

Tout conseil est le bienvenu, Merci, D

Answer 1

Embjer.js doit ajouter des fonctions au prototype natif Array.prototype. Vous pouvez vérifier si chaque clé est réellement une propriété du tableau lui-même, et non une propriété héritée, en utilisant hasOwnProperty :

for(key in songs) {
    if(songs.hasOwnProperty(key)){ 
        console.debug(songs[key]);
    }
}

Cependant, il est généralement recommandé de toujours utiliser des boucles for ordinaires avec des tableaux, puisqu'ils ont des clés numériques :

for(var i = 0; i < songs.length; i++) {
    console.debug(songs[i]);
}

Vous pouvez également utiliser le Fonction forEach que, ironiquement, Ember a ajouté au prototype Array s'il n'existait pas déjà (dans les anciens navigateurs).

songs.forEach(function(song){
    console.debug(song);
});

Démo

Answer 2

Par défaut, Ember étend les prototypes intégrés tels que Array.prototype afin de fournir des méthodes supplémentaires ou de réduire les méthodes ES5 pour les navigateurs non compatibles. Vous voyez ces méthodes parce que for...in itère sur les propriétés énumérables d'un objet . Il s'agit notamment de tous même celles héritées de la chaîne de prototypes.

Au lieu de cela, vous devez utiliser un for pour itérer sur un tableau :

for(var i=0; i<songs.length; i++) {
    console.debug(songs[i]);
}

Cette méthode ne s'appliquera qu'aux éléments réels du tableau, c'est-à-dire aux propriétés ayant une clé numérique. Il existe cependant des moyens plus agréables, par exemple en utilisant ES5 Array.forEach (shimmé par Ember dans les navigateurs plus anciens) :

songs.forEach(function(song, i) {
    console.debug(song);
});

En option, vous pouvez désactiver l'extension de prototype d'Ember en configurant Ember.EXTEND_PROPERTIES si vous n'avez pas l'intention de les utiliser ou s'ils peuvent entrer en conflit avec d'autres bibliothèques/scripts. Il y a une page entière dédié à ce problème dans la documentation Ember.