返回介绍

模板 - 编写助手方法

发布于 2020-02-21 15:48:02 字数 2314 浏览 922 评论 0 收藏 0

英文原文: 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}}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文