当前位置: 首页 > 文档资料 > Ember.js 中文指南 >

模板 - 编写助手方法

优质
小牛编辑
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本身变化或者其firstNamelastName属性值发生变化时,都能自动更新输出,那么,我们可以像下面这样做:

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}}