Как просмотреть все доступные переменные в шаблоне handlebars

Ответ 1

хорошим вариантом является отладка значения 'this' в шаблоне с помощью помощников Handlebars: 1.

{{#each}}
    {{log this}}    
{{/each}}

или, 2. похоже на @watson предложил

{{#each}}
    {{debugger}}
{{/each}}

а затем сверьтесь с переменными локальной области видимости для 'this' в Dev Tools

или, альтернативно, 3. вы можете записывать вещи непосредственно из вашего метода init-контроллера, например:

App.UsersController = Ember.ArrayController.extend({
    init: function() {
        console.log(this);
        console.log(this.getProperties('.'));
    }
});

Ответ 2

Удостоверьтесь, что вы попробовали Firebug - вы получите другую точку зрения на вещи, которые я нашел полезными. Но не оставляйте хром полностью; вам понадобится Ember Inspector в какой-то момент.

Я использую тот же помощник по отладке, который все рекомендуют, и это показывает Chrome:

Когда я расширяю один и тот же объект в firebug, я получаю следующую информацию, включая переменные, которые я искал (sources []), и некоторые другие полезные свойства, которых я не видел в Chrome.

Ответ 3

Если вам действительно нужно выгрузить переменные в вашем шаблоне, вы можете изучить шаблон AST и вывести содержимое соответствующих узлов (см. компилятор sources). Это непростая задача, потому что вы должны найти свой путь через испытания и ошибки, а код довольно низкоуровневый, и комментариев не так много.

Кажется, у Handlerbars нет ярлыка для того, что вы просите, поэтому шаги будут следующими:

• предварительно скомпилируйте шаблон (см. источник командной строки, я думаю, что функция называется handlebars.precompile())
• изучить AST

Ответ 4

В приведенном ниже примере приложения Ember вы можете указать его EmberObjects прямо в в app.js. Таким образом, в основном, доступными объектами являются свойства, которые на них определены. (например, subreddit имеет title и т.д.).

Если вы хотите, чтобы глобально доступный способ сбросить схему свойств объекта в консоль, одним из подходов было бы создание вспомогательного помощника "отладки", который будет перемещать элементы передаваемых контекстов и записывать их. Что-то вроде:

Handlebars.registerHelper('debug', function (emberObject) {
    if (emberObject && emberObject.contexts) {
        var out = '';

        for (var context in emberObject.contexts) {
            for (var prop in context) {
                out += prop + ": " + context[prop] + "\n"
            }
        }

        if (console && console.log) {
            console.log("Debug\n----------------\n" + out);
        }
    }
});

Затем вызовите его на все, что вы хотите проверить:

<div>Some markup</div>{{debug}}<div>Blah</div>

Это будет использовать любой объект EmberObject в области видимости, поэтому поместите его внутри {{#each}}, если вы хотите проверить элементы списка, в отличие от объекта с этим списком.

Ответ 5

Переменные, доступные в шаблоне, ограничены только моделью, которую вы используете для визуализации шаблона.

Вы должны установить контрольную точку в своем приложении, где вы визуализируете шаблон, и посмотрите, что находится в вашей модели в этот момент, и вы получите то, что у вас есть, чтобы разместить в своем шаблоне.

Ответ 6

Я создал Barhandles несколько лет назад. Он будет использовать парсер Handlebars для создания AST, а затем извлекать из него ссылки на переменные. Метод extractSchema хорошо извлекает схему. Эта схема не основана на JSON Schema, Joi или чем-то еще. Это доморощенный формат, который фиксирует большинство вещей, которые вы можете извлечь из шаблона Handlebars.

Итак, этот barhandlers.extractSchema('{{foo.bar}}') производит:

{
  "foo": {
    "_type": "object",
    "_optional": false,
    "bar": {
      "_type": "any",
      "_optional": false
    }
  }
}  

Он будет учитывать, что {{#if expr}} автоматически сделает вложенные ссылки необязательными. Он корректно обрабатывает изменения области действия, основанные на конструкциях {{#with expr}}, и также позволяет добавлять поддержку для ваших собственных пользовательских директив.

• http://nxt.flotsam.nl/barhandles
• https://medium.com/east-pole/advanced-barhandles-4a7e64c1bc0d

Мы использовали его для проверки правильности структур данных, которые мы передали в шаблон, и с этой целью он работал довольно хорошо.