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.

Solution 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.)

Solution 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

Solution 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

Solution 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>

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

View more solutions

Comments

[user2846569]

This probably will overwrite builtin log function, so different name should be chosen. Or Handlebars.logger.log could be overwritten (which is empty) to work with 'log', but this gives some undesired logging in other places.

[gfullam]

I like this in theory, but when I used it, optionalValue was always defined as an object even if no optional value was passed. I don't know if this is a default behavior of the registerHelper method of something else in my framework. Also, not returning anything seemed to cause Handlebars to stop parsing after the first log.