web-dev-qa-db-fra.com

Comment ajouter la logique JavaScript console.log () dans un modèle de guidon?

Je suis en train de créer une nouvelle application Meteor et je ne vois pas comment ajouter de la logique JavaScript avec Handlebars pour exécuter une console.log() avant chaque boucle. Dans le réseau principal, je ferais simplement, <% console.log(data); %>, pour vérifier que les données étaient transmises.
Je ne sais pas comment faire cela avec Meteor et Handlebars et je ne pouvais pas trouver la solution sur leur site.

javascripttemplatesmeteorhandlebars.jsmeteorite
28
Jason Biondo

Créez un assistant Handlebars dans l'un des fichiers JavaScript chargés par le client dans votre projet:

Template.registerHelper("log", function(something) {
  console.log(something);
});

Et appelez-le dans votre modèle:

{{log someVariable}}

Vous pouvez enregistrer le contexte actuel avec simplement {{log this}}.

(Notez que dans Meteor avant la version 0.8 ou dans les guidons purs en dehors d'une application Meteor, remplacez Template.registerHelper par Handlebars.registerHelper.)

41
Geoffrey Booth

Handlebars v3 a un assistant de journal intégré maintenant. Vous pouvez vous connecter à la console à partir d'un modèle

{{log  this}}

Vous pouvez définir le niveau de journalisation comme suit

Handlebars.logger.level = 0; // for DEBUG
19
Phil C

je trouve cette aide utile

Handlebars.registerHelper("debug", function(optionalValue) {
    console.log("Current Context");
    console.log("====================");
    console.log(this);
    if (optionalValue) {
        console.log("Value");
        console.log("====================");
        console.log(optionalValue);
    }
});

alors vous pouvez l'utiliser de deux manières

juste un simple

{{debug}}

qui affichera le contexte actuel

ou pour inspecter une valeur unique

{{debug val}}

simplement imprimer cette valeur

13
nate-strauser

Je fais ça, 

Handlebars.registerHelper('log', function(content) {
  console.log(content.fn(this));
  return '';
});

ce qui me permet de coder un bloc de débogueur, en utilisant le système de templates dans lequel je suis assis. Je peux donc bloquer le contenu et le résoudre, mais envoyez-le simplement à console.log.

{{#log}} title is {{title}} {{/log}}

Je fais aussi ça

$('script[type="text/x-handlebars-template"]').each(function(){
    Handlebars.registerPartial(this.id,$(this).html());
});

ce qui rend tous mes modèles disponibles en tant que partiels, ce qui me permet DRY de les convertir en blocs fonctionnels réutilisables sans avoir à éditer autre chose que le modèle lui-même.

Alors je peux maintenant faire des choses comme

{{#log}}Attribute listing {{>Attributes}}{{log}}

avec 

<script id="Attributes" type="text/x-handlebars-template">
{{#each attributes}} 
    {{@key}}={{this}} 
{{/each}}
</script>
2
Mark Lester

J'utilise toujours l'aide suivante: il enregistre les données et ajoute un point d'arrêt facultatif. De cette façon, vous pouvez inspecter le contexte actuel du guidon dans le débogueur du navigateur ;-)

Trouvé sur https://Gist.github.com/elgervb/5c38c8d70870f92ef6338a291edf88e9

/**
* Register a debug helper for Handlebars to be able to log data or inspect data in the browser console
* 
* Usage: 
*   {{debug someObj.data}} => logs someObj.data to the console
*   {{debug someObj.data true}} => logs someObj.data to the console and stops at a debugger point
* 
* Source: https://Gist.github.com/elgervb/5c38c8d70870f92ef6338a291edf88e9
* 
* @param {any} the data to log to console
* @param {boolean} whether or not to set a breakpoint to inspect current state in debugger
*/
Handlebars.registerHelper( 'debug', function( data, breakpoint ) {
    console.log(data);
    if (breakpoint === true) {   
        debugger;
    }
    return '';
});
1
Elger van Boxtel