如何查看车把模板中的所有可用变量

Question

我正在开发我的第一个 Ember.js 应用程序，但在连接所有点时遇到了一些问题。 如果我能在给定的把手模板中看到所有可用的变量，那将非常有帮助。

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

如何输出所有变量？

Answer 1

一个不错的选择是使用 Handlebars 助手在模板中调试 'this' 的值： 1.

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

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

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

然后在开发工具中深入到“this”的本地范围变量

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

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

Answer 2

确保你尝试过 Firebug - 你会从不同的角度看待事物，我发现这很有帮助。 但不要完全放弃 chrome； 在某些时候，您将需要Ember Inspector 。

我正在使用每个人都推荐的相同调试助手，这就是 Chrome 显示它的方式：

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

Answer 3

几年前我创建了Barhandles 。 它将使用 Handlebars 解析器生成 AST，然后从中提取变量引用。 extractSchema方法将——好吧——提取一个模式。 该模式不是基于 JSON 模式或 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

我们用它来验证我们传递给模板的数据结构，它为此工作得非常好。

Answer 4

如果您确实需要转储模板中的变量，则可以探索模板 AST 并输出相关节点的内容（请参阅编译器源代码）。 这不是一项容易的任务，因为您必须通过试验和错误找到自己的方法，而且代码非常低级，而且没有那么多注释。

Handlerbars 似乎没有您所要求的快捷方式，因此步骤是：

1. 预编译模板（参见命令行源代码，我认为该函数称为handlebars.precompile() ）
2. 探索 AST

Answer 5

您提到的示例 Ember 应用程序在 其 app.js 中定义了其 EmberObjects。 所以基本上，对象上可用的是在那里定义的属性。 （例如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}}中。

Answer 6

您可以通过利用Handlebars.parseWithoutProcessing来执行此操作，它采用输入模板字符串。 如果您使用 TypeScript，则返回特定类型hbs.AST.Program 。 您可以仅过滤 mustache 语句，然后遍历这些语句以获取变量名称。

此方法还支持 Handlebars 助手，因此您可以获取其密钥，但正因如此，此函数有点复杂，因为您需要检查 mustache 语句中的不同属性：

/**
 * Getting the variables from the Handlebars template.
 * Supports helpers too.
 * @param input
 */
const getHandlebarsVariables = (input = '') => {
  const ast = Handlebars.parseWithoutProcessing(input);
  return ast.body
    .filter(({ type }) => type === 'MustacheStatement')
    .map((statement) => statement.params[0]?.original || statement.path?.original);
};

这是 TypeScript 版本，由于条件属性，它有点复杂，但可以帮助解释更多类型：

/**
 * Getting the variables from the Handlebars template.
 * Supports helpers too.
 * @param input
 */
const getHandlebarsVariables = (input: string): string[] => {
  const ast: hbs.AST.Program = Handlebars.parseWithoutProcessing(input);

  return ast.body.filter(({ type }: hbs.AST.Statement) => (
    type === 'MustacheStatement'
  ))
  .map((statement: hbs.AST.Statement) => {
    const moustacheStatement: hbs.AST.MustacheStatement = statement as hbs.AST.MustacheStatement;
    const paramsExpressionList = moustacheStatement.params as hbs.AST.PathExpression[];
    const pathExpression = moustacheStatement.path as hbs.AST.PathExpression;

    return paramsExpressionList[0]?.original || pathExpression.original;
  });
};

我制作了一个 Codepen 来说明这一点。 基本上，给定以下模板：

Hello, {{first_name}}! The lottery prize is {{formatCurrency prize_amount}}! Good luck!

它将使用window.prompt询问用户的姓名和奖金金额。 该示例还实现了一个帮助器formatCurrency 。 你可以在这里看到它： https : //codepen.io/tinacious/pen/GRqYWJE

Answer 7

模板中可用的变量仅受用于渲染模板的模型的约束。

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