javascript - objetos - console.log variable

¿Cómo agrego la lógica de JavaScript de console.log() dentro de una plantilla de manubrios?

Question

Estoy en el proceso de crear una nueva aplicación Meteor y no puedo encontrar la manera de agregar lógica JavaScript con Handlebars para ejecutar console.log() antes de cada ciclo. En la red troncal solo lo haría, <% console.log(data); %> <% console.log(data); %> para probar que los datos se pasaron.
No estoy seguro de cómo hacer esto con Meteor and Handlebars y no pude encontrar la solución en su sitio.

Answer 1

Cree un ayudante de barras de desplazamiento en uno de los archivos JavaScript cargados por el cliente en su proyecto:

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

Y luego llámalo en tu plantilla:

{{log someVariable}}

Puede registrar el contexto actual simplemente con {{log this}} .

(Tenga en cuenta que en Meteor antes de la versión 0.8, o en Handlebars puros fuera de una aplicación Meteor, reemplace Template.registerHelper con Handlebars.registerHelper ).

Answer 2

Encuentro este ayudante para ser bastante útil

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

entonces puedes usarlo de dos maneras

Solo un simple

{{debug}}

que imprimirá el contexto actual

o para inspeccionar un solo valor

{{debug val}}

simplemente imprimir ese valor

Answer 3

Hago esto,

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

lo que me permite codificar un bloque de depurador, usando el sistema de plantillas me siento dentro. Entonces puedo darle un bloque y resolverá el contenido, pero solo envíelo a console.log.

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

Yo también hago esto

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

lo que hace que todas mis plantillas estén disponibles como parciales, lo que me permite SECAR mis plantillas en bloques funcionales reutilizables sin tener que editar nada más que la plantilla misma.

Entonces ahora puedo hacer cosas como

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

con

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

Answer 4

Siempre utilizo el siguiente helper: registra los datos y agrega un punto de interrupción opcional. De esta forma, puede inspeccionar el contexto actual de los manubrios en el depurador del navegador ;-)

Encontrado en 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 '''';
});

Answer 5

Handlebars v3 ahora tiene incorporado un asistente de registro. Puede iniciar sesión en la consola desde una plantilla

{{log this}}

Puede establecer el nivel de registro como tal

Handlebars.logger.level = 0; // for DEBUG