Custom Debug JsRender tag

I’ve been learning a lot about JsRender and Knockout.js after finding Ryan’s answer on StackOverflow. I’ve created a couple of templates and started to use the {{for}}{{/for}} tag.

I was having trouble figuring out how to access the parent object’s data from within the for loop. After reading John Papa’s awesome posts, Using JsRender with JavaScript and HTML and Advanced JsRender Templating Features I came up with a quick custom “Debug” tag to help me understand.

/**
 * Custom JsRender debug tag
 * Log a message and an object to the console.
 * Usage: {{debug #parent message='Inside the for loop'/}}
 **/
$.views.tags({
    debug: function(obj) {
        var props = this.props;
        // output a default message if the user didn't specify a message
        var msg = props.message || 'Debug:';
        console.log(msg, obj);
    }
});

For example, I was trying to figure out what the #parent object looked like so I put the debug tag inside my for loop:

{{debug #parent message='Inside the for loop'/}}

And got this output to the console:

Neato!

More links… someone who was having a similar issue which led to Boris’s example on accessing parent data.

• Jsrender
• Knockout