web-dev-qa-db-fra.com

Comment voir toutes les variables disponibles dans le modèle de guidon

Je travaille sur ma première application Ember.js et j'ai du mal à connecter tous les points. Ce serait vraiment utile si je pouvais juste voir toutes les variables disponibles dans un modèle de guidon donné.

Il y a une question connexe, mais vous devez connaître la variable dans le cadre de son utilisation: Comment ajouter la logique JavaScript console.log () à l'intérieur d'un modèle Handlebars?

Comment puis-je sortirtousles variables?

javascriptdebuggingember.jshandlebars.js
18
doub1ejack

Assurez-vous d'essayer Firebug - vous aurez une perspective différente sur les choses, ce que j'ai trouvé utile. Mais n'abandonnez pas complètement le chrome; vous aurez besoin du Ember Inspector à un moment donné.

J'utilise le même assistant de débogage que tout le monde recommande , et voici comment Chrome l'affiche:

Chrome inspector isn't very helpful

Lorsque je développe le même objet dans firebug, je reçois les informations suivantes, y compris les variables que je cherchais (sources []) et certaines autres propriétés utiles que je n'avais pas vues dans Chrome.

Firefox has more for me to work with

7
doub1ejack

une bonne option consiste à déboguer la valeur de 'this' dans un modèle à l'aide des aides Handlebars: 1.

{{#each}}
    {{log this}}    
{{/each}}

ou 2. semblable à @ Watson suggéré

{{#each}}
    {{debugger}}
{{/each}}

puis accédez aux variables d'étendue locale pour 'this' dans les outils de développement.

enter image description here

ou bien, 3. vous pouvez enregistrer des éléments directement à partir de votre méthode de contrôleur, telles que:

App.UsersController = Ember.ArrayController.extend({
    init: function() {
        console.log(this);
        console.log(this.getProperties('.'));
    }
});
7
Elise Chant

Si vous avez vraiment besoin de vider les variables dans votre modèle, vous pouvez explorer le modèle AST et générer le contenu des nœuds appropriés (voir le compilateur sources ). Ce n'est pas une tâche facile, car vous devez trouver votre chemin à travers des essais et des erreurs, le code est plutôt bas niveau et il n'y a pas beaucoup de commentaires.

Il semble que Handlerbars n’ait pas de raccourci pour ce que vous demandez, donc les étapes seraient les suivantes:

  1. précompile un modèle (voir le source de ligne de commande , je pense que la fonction s'appelle handlebars.precompile())
  2. explorer l'AST
1
Raffaele

L'exemple d'application Ember que vous avez mentionné définit ses EmberObjects directement dans son app.js . Donc, fondamentalement, ce qui est disponible sur les objets sont les propriétés qui y sont définies. (par exemple, subreddit a une title, etc.). 

Si vous voulez un moyen globalement disponible de vider le schéma de propriétés d'un objet sur la console, vous pouvez créer un assistant de "débogage" qui guide les membres des contextes transmis et les écrit. Quelque chose comme:

Handlebars.registerHelper('debug', function (emberObject) {
    if (emberObject && emberObject.contexts) {
        var out = '';

        for (var context in emberObject.contexts) {
            for (var prop in context) {
                out += prop + ": " + context[prop] + "\n"
            }
        }

        if (console && console.log) {
            console.log("Debug\n----------------\n" + out);
        }
    }
});

Puis appelez ce que vous voulez inspecter:

<div>Some markup</div>{{debug}}<div>Blah</div>

Ceci utilisera tout ce qui est EmberObject, donc insérez-le dans un {{#each}} si vous voulez inspecter les éléments de la liste, par opposition à l'objet contenant cette liste.

1
mcw0933

Les variables disponibles dans un modèle ne sont contraintes que par le modèle que vous utilisez pour rendre le modèle. 

Vous devez définir un point d'arrêt dans votre application à l'endroit où vous rendez le modèle et voir ce qu'il y a dans votre modèle à ce moment-là, ce qui devrait vous permettre de disposer de ce que vous avez à mettre dans votre modèle.

0
dezman