模板 - 编写助手方法
优质
小牛编辑
131浏览
2023-12-01
英文原文: http://emberjs.com/guides/templates/writing-helpers/
有时,你想在程序里多次使用同一段 HTML 代码。这种情况下,你就可以自定义一个任何 Handlebars 模板都能调用的助手方法。
比如,你频繁地用一个拥有 class(译注:这个class为css中的class,非JavaScript中的类) 的 <span>
来包裹特定的值。你可以这样注册一个助手方法:
1 2 3 4 | Ember.Handlebars.helper('highlight', function(value, options) { var escaped = Handlebars.Utils.escapeExpression(value); return new Handlebars.SafeString('<span class="highlight">' + escaped + '</span>'); }); |
如果你想从助手方法返回 HTML,并且你不想转义,那你就要保证返回的结果是新的 SafeString
。首先要确保已经转义了用户数据。
你可以从Handlebars模板的任何地方调用此助手方法:
1 | {{highlight name}} |
输出如下:
1 | <span class="highlight">Peter</span> |
如果当前上下文中的 name
属性发生变化, Ember.js会自动重新执行此助手方法,并用新的值去更新 DOM。
依赖
想象另一种情况,如果要渲染App.Person
的全名,而希望在person本身变化或者其firstName
和lastName
属性值发生变化时,都能自动更新输出,那么,我们可以像下面这样做:
1 2 3 | Ember.Handlebars.helper('fullName', function(person) { return person.get('firstName') + ' ' + person.get('lastName'); }, 'firstName', 'lastName'); |
你可以这样用助手方法:
1 | {{fullName person}} |
现在,一旦上下文中的 person 变化了,或任何 依赖的键值 发生变化,输出都会自动更新。
传递给 fullName
助手方法的路径以及它的依赖键值都可以是完整的 属性路径 (如person.address.country
)
自定义视图助手
有时需要经常在多个地方使用{{view}}
来渲染视图类。其实在这样的情况下,可以通过注册一个自定义的视图助手来简化。
例如,假设有一个视图名为App.CalendarView
,那么可以注册一个如下的助手:
1 | Ember.Handlebars.helper('calendar', App.CalendarView); |
这样在模板中使用App.CalendarView
就变成:
1 | {{calendar}} |
该助手提供了与视图助手相同的功能,并且可以接收相同的参数:
1 | {{view App.CalendarView}} |