web-dev-qa-db-ja.com

Handlebarsテンプレート内にconsole.log（）JavaScriptロジックを追加するにはどうすればよいですか？

新しいMeteorアプリを作成中です。JavaScriptロジックをHandlebarsに追加して、各ループの前にconsole.log()を実行する方法がわかりません。バックボーンでは、<% console.log(data); %>を実行して、データが渡されたことをテストします。
MeteorとHandlebarsでこれを行う方法がわからず、そのサイトで解決策を見つけることができませんでした。

javascripttemplatesmeteorhandlebars.jsmeteorite
29
Jason Biondo

プロジェクトのクライアントロードJavaScriptファイルの1つでHandlebarsヘルパーを作成します。

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

そして、テンプレートでそれを呼び出します：

{{log someVariable}}

現在のコンテキストを記録するには、単に{{log this}}。

（バージョン0.8より前のMeteor、またはMeteorアプリの外部の純粋なハンドルバーでは、Template.registerHelper with Handlebars.registerHelper。）

43
Geoffrey Booth

Handlebars v にはログヘルパーが組み込まれました。テンプレート内からコンソールにログインできます

{{log  this}}

ロギングレベルは次のように設定できます

Handlebars.logger.level = 0; // for DEBUG
19
Phil C

このヘルパーは非常に便利だと思います

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

その後、2つの方法で使用できます

ただ単純な

{{debug}}

現在のコンテキストを出力します

または単一の値を検査する

{{debug val}}

その値を印刷するだけです

13
nate-strauser

私はこれをします、

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>
2
Mark Lester

私は常に次のヘルパーを使用します。データを記録し、オプションのブレークポイントを追加します。この方法で、ブラウザーデバッガーで現在の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 '';
});
1
Elger van Boxtel