3.10 Templates -- Development Helpers

时间:2022-06-01 11:30:20

一、Development Helpers

Handlebar和Ember有好多个辅助器可以使模板开发更容易。

这些辅助器输出变量到浏览器的控制台,或者从模板中激活debugger

二、Logging

{{log}}辅助器可以很容易的将当前上下文中的变量或者表达式输出到你的控制台console中:

{{log 'Name is:' name}}

它还接受原始类型,例如strings和numbers。

三、Adding a Breakpoint

1. {{debugger}}提供了一个handlebars相当于JS中的debugger关键字。它将停止执行并使你能够检查当前渲染的上下文。

{{debugger}}

2. 当使用debugger helper时你将获得一个get function。这个函数检查模板上下文中可用的值。

例如,如果你想知道为什么一个值{ { foo } }并不像预期的那样呈现在模板中,你可以放置一个{{debugger}},当达到断点时,你可以检索它的值。

> get('foo')

3. get也可以知道键(属性的key)。所以在这种情况下:

{{#each items as |item|}}
{{debugger}}
{{/each}}

你可以从当前item中取值:

> get('item.name')

你也可以获取视图的上下文确保它是你期望的对象:

> context