How do I add console.log() JavaScript logic inside of a Handlebars template?

Question

I'm in the process of building a new Meteor app and I can't figure out how to add JavaScript logic with Handlebars to run a console.log() before my each loop. In backbone I would just do, <% console.log(data); %> to test that the data was being passed in.
I'm not sure how to do this with Meteor and Handlebars and I couldn't find the solution on their site.

Answer 1

Create a Handlebars helper in one of the client-loaded JavaScript files in your project:

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

And then call it in your template:

{{log someVariable}}

You can log the current context with simply {{log this}}.

(Note that in Meteor before version 0.8, or in pure Handlebars outside of a Meteor app, replace Template.registerHelper with Handlebars.registerHelper.)

Answer 2

Handlebars v3 has a built in log helper now. You can log to the console from within a template

{{log  this}}

You can set the logging level like so

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

Answer 3

i find this helper to be quite useful

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

then you can use it in two ways

just a simple

{{debug}}

which will print out the current context

or to inspect a single value

{{debug val}}

to just print out that value

Answer 4

I do this,

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

which allows me to code a debugger block, using the templating system I am sat inside. So I can give it a block and it will resolve the content but just send it to console.log.

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

I also do this

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

which makes all my templates available as partials, allowing me to DRY up my templates into re-usable functional blocks without having to edit anything other than the template itself.

So I can now do things like

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

with

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

Answer 5

I always use the following helper: it logs the data and adds an optional breakpoint. This way you can inspect the current Handlebars context in the browser debugger ;-)

Found on 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 '';
});