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

Question

我正在构建一个新的Meteor应用程序，但我不知道如何在Handlebars中添加JavaScript逻辑以在我的每个循环之前运行console.log（）。在Backbone中，我只需执行<% console.log(data); %>即可测试数据是否被传递。
我不确定如何在Meteor和Handlebars中实现这一点，并且在他们的网站上也找不到解决方案。

- Jason Biondo

Answer 1

在您的项目中的客户端加载的JavaScript文件中创建一个Handlebars助手：

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

然后在您的模板中调用它：

{{log someVariable}}

你可以简单地用 {{log this}} 来记录当前上下文。

（注意，在 Meteor 0.8 版本之前，或在 Meteor 应用程序之外的纯 Handlebars 中，请将 Template.registerHelper 替换为 Handlebars.registerHelper。）

- Geoffrey Booth

---

这可能会覆盖内置的日志函数，因此应选择不同的名称。或者可以覆盖Handlebars.logger.log（为空）以使用“log”，但这会在其他地方产生一些不需要的日志记录。 - user2846569

Answer 2

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

{{log  this}}

你可以这样设置日志记录级别。

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

- Phil C

Answer 3

我觉得这个帮助工具非常有用。

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

然后您可以以两种方式使用它

只是一个简单的

{{debug}}

这将打印出当前上下文

或者检查单个值

{{debug val}}

只需打印出该值即可

- nate-strauser

---

我理论上喜欢这个，但当我使用它时，即使没有传递可选值，optionalValue总是被定义为一个对象。我不知道这是否是registerHelper方法的默认行为还是框架中的其他内容。此外，不返回任何东西似乎会导致Handlebars在第一次日志之后停止解析。 - gfullam

Answer 4

我做这个，

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

我可以使用模板系统编写一个调试器块，这使得我能够解析内容并将其发送到console.log而不做其他处理。

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

我也这样做

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

这使得我所有的模板都可以作为局部模板使用，让我能够将我的模板变成可重复使用的功能块，而不必编辑除模板本身以外的任何内容，从而实现DRY。

因此，我现在可以做一些事情，比如

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

使用

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

- Mark Lester

Answer 5

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

来源：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 '';
});

- Elger van Boxtel