如何在Handlebars模板中添加console.log（）JavaScript逻辑？

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.

我正在构建一个新的Meteor应用程序,我无法弄清楚如何使用Handlebars添加JavaScript逻辑以在我的每个循环之前运行console.log()。在骨干中我会做,<%console.log(data); %>来测试数据是否正在传入。我不知道如何使用Meteor和Handlebars这样做,我在他们的网站上找不到解决方案。

5 个解决方案

#1

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

在项目中的一个客户端加载的JavaScript文件中创建Handlebars帮助器:

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}}.

您可以使用{{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.)

(请注意,在版本0.8之前的Meteor中,或者在Meteor应用程序之外的纯手柄中,将Template.registerHelper替换为Handlebars.registerHelper。)

#2

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

Handlebars v3现在有一个内置的日志助手。您可以从模板中登录控制台

{{log  this}}

You can set the logging level like so

您可以像这样设置日志记录级别

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

#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

打印出那个价值

#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.

这允许我使用我坐在里面的模板系统编写调试器块。所以我可以给它一个块,它将解析内容,但只是将其发送到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>

#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 ;-)

我总是使用以下帮助程序:它记录数据并添加一个可选的断点。这样你可以在浏览器调试器中检查当前的Handlebars上下文;-)

Found on https://gist.github.com/elgervb/5c38c8d70870f92ef6338a291edf88e9

在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