Как добавить XML-логику console.log() в шаблон Handlebars?

Ответ 1

Создайте помощник Handlebars в одном из файлов JavaScript, загруженных клиентом в вашем проекте:

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

И затем назовите его в своем шаблоне:

{{log someVariable}}

Вы можете записать текущий контекст с помощью просто {{log this}}.

(Обратите внимание, что в Meteor до версии 0.8 или в чистых Handlebars вне приложения Meteor замените Template.registerHelper на Handlebars.registerHelper.)

Ответ 2

Я считаю, что этот помощник весьма полезен

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

чтобы просто распечатать это значение

Ответ 3

Handlebars v3 теперь имеет встроенный лог-помощник. Вы можете войти в консоль из шаблона

{{log  this}}

Вы можете установить уровень ведения журнала таким образом

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

Ответ 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>

Ответ 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 '';
});