如何在 Handlebars 模板中添加 console.log() JavaScript 逻辑？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17499742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add console.log() JavaScript logic inside of a Handlebars template?
提问by Jason Biondo
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 来做到这一点，而且我在他们的网站上找不到解决方案。
回答by Geoffrey Booth
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.registerHelperwith Handlebars.registerHelper.)
（请注意，在 0.8 版之前的 Meteor 中，或在 Meteor 应用程序之外的纯 Handlebars 中，请替换Template.registerHelper为Handlebars.registerHelper.）
回答by Phil C
Handlebars v3has 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
回答by nate-strauser
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
只是打印出该值
回答by Mark Lester
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>
回答by Elger van Boxtel
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 '';
});
