javascript 如何查看车把模板中的所有可用变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19800602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to see all available variables in handlebars template
提问by doub1eHyman
I'm working on my first Ember.js app and am having some trouble connecting all the dots. It would be really helpful if I could just see all the variables available within a given handlebars template.
我正在开发我的第一个 Ember.js 应用程序，但在连接所有点时遇到了一些问题。如果我能在给定的把手模板中看到所有可用的变量，那将非常有帮助。
There is a related question, but you have to know the variable that is in scope to use it: How do I add console.log() JavaScript logic inside of a Handlebars template?
有一个相关的问题，但您必须知道使用它的范围内的变量： 如何在 Handlebars 模板中添加 console.log() JavaScript 逻辑？
How can I output allthe variables?
如何输出所有变量？
回答by Elise Chant
a good option is to debug the value of 'this' in a template using the Handlebars helpers: 1.
一个不错的选择是使用 Handlebars 助手在模板中调试 'this' 的值： 1.
{{#each}}
{{log this}}
{{/each}}
or, 2. similar to @watson suggested
或者，2. 类似于@watson 建议
{{#each}}
{{debugger}}
{{/each}}
and then drill in to the Local Scope Variables for 'this' in the Dev Tools
然后在开发工具中深入到“this”的本地范围变量
or alternatively, 3. you could log things directly from inside your Controller init method, such as:
或者， 3. 您可以直接从 Controller init 方法内部记录内容，例如：
App.UsersController = Ember.ArrayController.extend({
init: function() {
console.log(this);
console.log(this.getProperties('.'));
}
});
回答by doub1eHyman
Make sure you try out Firebug - you'll get a different perspective on things, which I found helpful. But don't abandon chrome completely; you will need the Ember Inspectorat some point.
确保你尝试过 Firebug - 你会对事物有不同的看法，我发现这很有帮助。但是不要完全放弃chrome；在某些时候，您将需要Ember Inspector。
I'm using the same debugging helper everyone recommends, and this is how Chrome displays it:
我正在使用每个人都推荐的相同调试助手，这就是 Chrome 显示它的方式：
When I expand the same object in firebug, I get the following info, including the variables I was looking for (sources[]) and some other useful properties I hadn't seen in Chrome.
当我在 firebug 中展开同一个对象时，我得到以下信息，包括我正在寻找的变量 (sources[]) 以及我在 Chrome 中没有看到的其他一些有用的属性。
回答by mcw
The sample Ember app you mention defines its EmberObjects right in its app.js. So basically, what's available on the objects are the properties that are defined onto them there. (e.g. subreddithas a title, etc).
您提到的示例 Ember 应用程序在其 app.js 中定义了其 EmberObjects 。所以基本上，对象上可用的是在那里定义的属性。（例如subreddit有一个title，等等）。
If you want a globally available way to dump an object's property schema out to the console, one approach would be to create a "debug" helper that walks the members of the passed-in contexts and writes them out. Something like:
如果您想要一种全局可用的方法将对象的属性模式转储到控制台，一种方法是创建一个“调试”助手，它遍历传入上下文的成员并将它们写出。就像是：
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);
}
}
});
Then call it on whatever you want to inspect:
然后在任何你想检查的地方调用它：
<div>Some markup</div>{{debug}}<div>Blah</div>
This will use whatever EmberObject is in scope, so pop it inside of an {{#each}}if you want to inspect the list elements, as opposed to the object with that list.
这将使用范围内的任何 EmberObject，因此{{#each}}如果要检查列表元素，而不是具有该列表的对象，则将其弹出到 an中。
回答by Raffaele
If you really need to dump the variablesin your template, you can explore the template AST and output the content of the relevant nodes (see the compiler sources). This is not an easy task because you have to find your way through trials and errors, and the code is quite low-level and there are not so many comments.
如果您确实需要转储模板中的变量，则可以探索模板 AST 并输出相关节点的内容（请参阅编译器源代码）。这不是一项容易的任务，因为您必须通过反复试验找到自己的方法，而且代码非常低级，而且没有那么多注释。
It seems Handlerbars doesn't have a shortcut for what you're asking, so the steps would be:
Handlerbars 似乎没有您所要求的快捷方式，因此步骤是：
- precompile a template (see the command line source, I think the function is called
handlebars.precompile()) - explore the AST
- 预编译一个模板（看命令行源码，我觉得是调用函数
handlebars.precompile()） - 探索 AST
回答by Wilfred Springer
I created Barhandlesa few years ago. It will use the Handlebars parser to produce the AST, and then extract variable references from it. The extractSchemamethod will — well — extract a schema. That schema is not based on JSON Schema or Joi or anything. It's a homegrown format that captures most of the things you could possibly extract from Handlebars template.
几年前我创建了Barhandles。它将使用 Handlebars 解析器生成 AST，然后从中提取变量引用。该extractSchema方法将 - 好吧 - 提取模式。该模式不是基于 JSON 模式或 Joi 或任何东西。它是一种本土格式，可以捕获您可能从 Handlebars 模板中提取的大部分内容。
So, this barhandlers.extractSchema('{{foo.bar}}')produces:
所以，这barhandlers.extractSchema('{{foo.bar}}')会产生：
{
"foo": {
"_type": "object",
"_optional": false,
"bar": {
"_type": "any",
"_optional": false
}
}
}
It will take into account that an {{#if expr}}will automatically make nested references optional. It correctly handles scope changes based on {{#with expr}}constructs, and it allows you to add support for your own custom directives as well.
它将考虑到{{#if expr}}自动将嵌套引用设为可选。它根据{{#with expr}}构造正确处理范围更改，并且还允许您添加对自己的自定义指令的支持。
We used it to do validation on the data structures that we passed into the template, and it was working pretty well for that purpose.
我们用它来验证我们传递给模板的数据结构，它为此工作得非常好。
回答by dezman
The variables available within a template are only constrained by the model you are using to render the template.
模板中可用的变量仅受用于渲染模板的模型的约束。
You should set a breakpoint in your app where you render the template and see what is in your model at that point, which will should you what you have available to put in your template.
您应该在您的应用程序中设置一个断点，您可以在其中渲染模板并查看此时模型中的内容，这应该是您可以放入模板的内容。
