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

Question

我正在構建一個新的Meteor應用程序，我無法弄清楚如何在每個循環之前使用Handlebars添加JavaScript邏輯來運行console.log() 。 在骨干中我會做， <% console.log(data); %> <% console.log(data); %>來測試數據是否正在傳入。
我不知道如何使用Meteor和Handlebars這樣做，我在他們的網站上找不到解決方案。

Answer 1

在項目中的一個客戶端加載的JavaScript文件中創建Handlebars幫助器：

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

然后在模板中調用它：

{{log someVariable}}

您可以使用{{log this}}來記錄當前上下文。

（請注意，在版本0.8之前的Meteor中，或者在Meteor應用程序之外的純手柄中，將Template.registerHelper替換為Handlebars.registerHelper 。）

Answer 2

Handlebars v3現在有一個內置的日志助手。 您可以從模板中登錄控制台

{{log  this}}

您可以像這樣設置日志記錄級別

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

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

打印出那個價值

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());
});

這使我的所有模板都可以作為部分模板使用，允許我將模板干燥成可重復使用的功能塊，而無需編輯模板本身以外的任何內容。

所以我現在可以這樣做了

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

同

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

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