如何在Handlebars模板中查看所有可用变量

Question

我正在研究我的第一个Ember.js应用程序,并且在连接所有点时遇到了一些麻烦.如果我能够看到给定车把模板中的所有可用变量,那将非常有用.

有一个相关的问题,但您必须知道使用它的范围内的变量: 如何在Handlebars模板中添加console.log()JavaScript逻辑？

如何输出所有变量？

Answer 1

一个好的选择是使用Handlebars助手调试模板中'this'的值:1.

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

或者,2.与@watson建议类似

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

然后在Dev Tools中钻取"this"的Local Scope Variables

或者,3.您可以直接从Controller init方法中记录内容,例如:

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

Answer 2

确保你试用Firebug - 你会对事物有不同的看法,我觉得这很有帮助.但是不要完全放弃镀铬; 在某些时候你需要Ember Inspector.

我使用的是每个人都推荐的调试助手,这就是Chrome显示的方式:

当我在firebug中展开相同的对象时,我得到以下信息,包括我正在寻找的变量(sources [])以及我在Chrome中没有看到的一些其他有用的属性.

Answer 3

几年前我创建了Barhandles 。它将使用 Handlebars 解析器生成 AST，然后从中提取变量引用。该extractSchema方法将 \xe2\x80\x94 以及 \xe2\x80\x94 提取模式。该模式不是基于 JSON Schema 或 Joi 或任何东西。这是一种自行开发的格式，可以捕获您可以从 Handlebars 模板中提取的大部分内容。

\n\n

所以，这barhandlers.extractSchema(\'{{foo.bar}}\')会产生：

\n\n

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

\n\n

它将考虑到{{#if expr}}自动将嵌套引用设为可选。它可以根据{{#with expr}}构造正确处理范围更改，并且还允许您添加对自己的自定义指令的支持。

\n\n

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

\n\n

我们用它来对传递到模板中的数据结构进行验证，并且它在该目的上工作得很好。

\n

Answer 4

模板中可用的变量仅受用于渲染模板的模型的限制。

您应该在渲染模板的应用程序中设置一个断点，并查看此时模型中的内容，这将告诉您可以将哪些内容放入模板中。