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

EN

一个不错的选择是使用Handlebar helpers调试模板中'this‘的值: 1。

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

或者，2.类似@watson建议的

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

然后在Dev工具中深入到'this‘的本地范围变量

​

​

或者，3.您可以直接从您的Controller init方法内部记录事件，例如：

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

一定要尝试Firebug --你会对事物有不同的看法，这对我很有帮助。但不要完全放弃chrome；在某些情况下，您会需要Ember Inspector。

我使用的是same debugging helper everyone recommends，这是Chrome显示它的方式：

​

​

当我在firebug中展开同一个对象时，我得到了以下信息，包括我正在寻找的变量(sources[])和其他一些我在Chrome中没有见过的有用属性。

​

​

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

因此，此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

我们使用它来验证我们传递给模板的数据结构，并且它在这个目的上工作得很好。