Я работаю над своим первым приложением Ember.js, и у меня возникают проблемы с подключением всех точек. Было бы очень полезно, если бы я мог просто увидеть все переменные, доступные в рамках данного шаблона handlebars.
Возникает связанный с этим вопрос, но вы должны знать переменную, которая может использовать ее: Как добавить логику JavaScript console.log() внутри шаблона Handelbars?
Как я могу вывести переменные all?
хорошим вариантом является отладка значения '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('.'));
}
});
Удостоверьтесь, что вы попробовали Firebug - вы получите другую точку зрения на вещи, которые я нашел полезными. Но не оставляйте хром полностью; вам понадобится Ember Inspector в какой-то момент.
Я использую тот же помощник по отладке, который все рекомендуют, и это показывает Chrome:
Когда я расширяю один и тот же объект в firebug, я получаю следующую информацию, включая переменные, которые я искал (sources []), и некоторые другие полезные свойства, которых я не видел в Chrome.
Если вам действительно нужно выгрузить переменные в вашем шаблоне, вы можете изучить шаблон AST и вывести содержимое соответствующих узлов (см. компилятор sources). Это непростая задача, потому что вы должны найти свой путь через испытания и ошибки, а код довольно низкоуровневый, и комментариев не так много.
Кажется, у Handlerbars нет ярлыка для того, что вы просите, поэтому шаги будут следующими:
handlebars.precompile())В приведенном ниже примере приложения 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}}, если вы хотите проверить элементы списка, в отличие от объекта с этим списком.
Переменные, доступные в шаблоне, ограничены только моделью, которую вы используете для визуализации шаблона.
Вы должны установить контрольную точку в своем приложении, где вы визуализируете шаблон, и посмотрите, что находится в вашей модели в этот момент, и вы получите то, что у вас есть, чтобы разместить в своем шаблоне.
Я создал 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}}, и также позволяет добавлять поддержку для ваших собственных пользовательских директив.
Мы использовали его для проверки правильности структур данных, которые мы передали в шаблон, и с этой целью он работал довольно хорошо.