我正在开发我的第一个Ember.js应用程序,在连接所有点时遇到了一些麻烦。如果我能看到给定车把模板中所有可用的变量,这将非常有帮助。
这里有一个相关的问题,但是您必须知道作用域中的变量才能使用它:How do I add console.log() JavaScript logic inside of a Handlebars template?
如何输出***所有***变量?
我正在开发我的第一个Ember.js应用程序,在连接所有点时遇到了一些麻烦。如果我能看到给定车把模板中所有可用的变量,这将非常有帮助。
这里有一个相关的问题,但是您必须知道作用域中的变量才能使用它:How do I add console.log() JavaScript logic inside of a Handlebars template?
如何输出***所有***变量?
7条答案
按热度按时间evrscar21#
一个好的选择是使用Handlebars帮助器在模板中调试'this'的值:1.
或者,2.类似于@沃森建议的
然后在开发工具中深化到“this”的局部作用域变量
或者,3.您可以直接从Controller init方法内部记录内容,例如:
5hcedyr02#
一定要尝试Firebug --你会从不同的Angular 看待事物,我发现这很有帮助。在某些情况下您将需要Ember Inspector。
我使用的是same debugging helper everyone recommends,Chrome是这样显示的:
当我在firebug中展开同一个对象时,我得到了以下信息,包括我正在寻找的变量(sources[])和其他一些我在Chrome中没有看到的有用属性。
xesrikrc3#
几年前我创建了Barhandles。它将使用Handlebars解析器生成AST,然后从中提取变量引用。
extractSchema
方法将提取一个模式。该模式不是基于JSON模式或Joi或任何东西。它是一种自行开发的格式,捕获了您可能从Handlebars模板中提取的大多数内容。因此,
barhandlers.extractSchema('{{foo.bar}}')
产生:它会考虑到
{{#if expr}}
会自动使嵌套引用成为可选的。它会正确地处理基于{{#with expr}}
结构的作用域更改,并且它还允许您添加对自定义指令的支持。我们用它来验证传递到模板中的数据结构,它在这方面工作得很好。
vshtjzan4#
如果你真的需要转储模板中的 variables,你可以探索模板AST并输出相关节点的内容(参见编译器sources),这不是一件容易的事情,因为你必须通过反复试验找到你的方法,而且代码相当低级,没有那么多注解。
看起来Handlerbars没有快捷方式来满足您的要求,因此步骤如下:
1.预编译一个模板(参见command line source,我认为这个函数叫做
handlebars.precompile()
)1.探索AST
1yjd4xko5#
你提到的Ember示例应用程序在its app.js中定义了EmberObjects。因此,基本上,对象上可用的是在那里定义的属性。(例如,
subreddit
有一个title
,等等)。如果你想要一个全局可用的方法将对象的属性模式转储到控制台,一个方法是创建一个“调试”助手,它遍历传入的上下文的成员并写出它们。
然后在您要检查的任何对象上调用它:
这将使用范围内的任何EmberObject,因此,如果要检查列表元素,请将其弹出到
{{#each}}
中,而不是带有该列表的对象。gorkyyrv6#
您可以利用
Handlebars.parseWithoutProcessing
来取得输入模板字串。如果您使用TypeScript,它会传回特定的类型hbs.AST.Program
。您可以只筛选moustache陈述式,然后重复这些陈述式来取得变数名称。这个方法也支持Handlebars辅助函数,所以你可以得到它的键,但是正因为如此,这个函数有点复杂,因为你需要检查moustache语句的不同属性:
下面是TypeScript版本,由于条件属性的原因,它有点复杂,但可以帮助更多地解释类型:
我做了一个Codepen来说明这一点。基本上,给定以下模板:
它将使用
window.prompt
询问用户的姓名和奖金数额。该示例还实现了一个帮助器formatCurrency
。您可以在此处看到它:https://codepen.io/tinacious/pen/GRqYWJExpszyzbs7#
模板中可用的变量仅受用于渲染模板的模型的约束。
你应该在你的应用中设置一个断点,在那里你渲染模板,并看到什么是在你的模型在这一点上,这将你应该你有什么可以放在你的模板。