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

bvjveswy  于 2022-06-06  发布在  其他
关注(0)|答案(7)|浏览(167)

我正在开发我的第一个Ember.js应用程序,在连接所有点时遇到了一些麻烦。如果我能看到给定车把模板中所有可用的变量,这将非常有帮助。
这里有一个相关的问题,但是您必须知道作用域中的变量才能使用它:How do I add console.log() JavaScript logic inside of a Handlebars template?
如何输出***所有***变量?

evrscar2

evrscar21#

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

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

或者,2.类似于@沃森建议的

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

然后在开发工具中深化到“this”的局部作用域变量

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

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

5hcedyr02#

一定要尝试Firebug --你会从不同的Angular 看待事物,我发现这很有帮助。在某些情况下您将需要Ember Inspector
我使用的是same debugging helper everyone recommends,Chrome是这样显示的:

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

xesrikrc

xesrikrc3#

几年前我创建了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}}结构的作用域更改,并且它还允许您添加对自定义指令的支持。

我们用它来验证传递到模板中的数据结构,它在这方面工作得很好。

vshtjzan

vshtjzan4#

如果你真的需要转储模板中的 variables,你可以探索模板AST并输出相关节点的内容(参见编译器sources),这不是一件容易的事情,因为你必须通过反复试验找到你的方法,而且代码相当低级,没有那么多注解。
看起来Handlerbars没有快捷方式来满足您的要求,因此步骤如下:
1.预编译一个模板(参见command line source,我认为这个函数叫做handlebars.precompile()
1.探索AST

1yjd4xko

1yjd4xko5#

你提到的Ember示例应用程序在its 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}}中,而不是带有该列表的对象。

gorkyyrv

gorkyyrv6#

您可以利用Handlebars.parseWithoutProcessing来取得输入模板字串。如果您使用TypeScript,它会传回特定的类型hbs.AST.Program。您可以只筛选moustache陈述式,然后重复这些陈述式来取得变数名称。
这个方法也支持Handlebars辅助函数,所以你可以得到它的键,但是正因为如此,这个函数有点复杂,因为你需要检查moustache语句的不同属性:

/**
 * 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

xpszyzbs

xpszyzbs7#

模板中可用的变量仅受用于渲染模板的模型的约束。
你应该在你的应用中设置一个断点,在那里你渲染模板,并看到什么是在你的模型在这一点上,这将你应该你有什么可以放在你的模板。

相关问题