Ember 翻译——教程八：创建一个 Handlebars helper

创建一个 Handlebars helper

到目前为止，我们的 app 是直接将从我们的 Ember Data 模型中将数据获取出来进而呈现给用户的。当我们 app 不断壮大，我们将希望在将这些在呈现给用户之前进行处理。由于这个原因，Ember 提供了 Handlebars 模板 helper 来在我们的模板中修饰数据。让我们使用一个 Handlebars helper 来让我们的用户快速知道一套房屋是单独的还是是一个社区的一部分。

一开始，让我们生产一个 rental-property-type 的 helper：

ember g helper rental-property-type

这将创建两个文件，包括我们的 helper 和它相关的测试文件：

installing helper
  create app/helper/rental-property-type.js
installing helper-test
  create tests/unit/helpers/rental-property-type-test.js

我们新的 helper 初始化时将自带一些生成器添加的示例代码：

app/helpers/rental-property-type.js

import Ember from 'ember';

export function rentalPropertyType(params/*, hash*/) {
  return params;
}

export default Ember.Helper.helper(rentalPropertyType);

让我们更新我们的 rental-list 组件模板来使用我们新的 helper 和传入 rental.type ：

app/templates/components/rental-listing.hbs

<article class="listing">
  <a {{action 'toggleImageSize'}} class="image {{if isWide "wide"}}">
    <img src="{{rental.image}}" alt="">
    <small>View Larger</small>
  </a>
  <h3>{{rental.title}}</h3>
  <div class="detail owner">
    <span>Owner:</span> {{rental.owner}}
  </div>
  <div class="detail type">
    <span>Type:</span> {{rental-property-type rental.type}} - {{rental.type}}
  </div>
  <div class="detail location">
    <span>Location:</span> {{rental.city}}
  </div>
  <div class="detail bedrooms">
    <span>Number of bedrooms:</span> {{rental.bedrooms}}
  </div>
</article>

理想情况下，我们将在我们第一条租赁信息中看见“Type: Standaone - Estate”。
然而，我们默认的模板 helper 将返回我们 rental.type 的值。让我们更新我们的 helper 来查看在 communityPropertyTypes 数组中是否存在这样一个属性。如果存在，我们将返回 Community 或 Standalone：

app/helpers/rental-property-type.js

import Ember from 'ember';

const communityPropertyTypes = [
  'Condo',
  'Townhouse',
  'Apartment'
];

export function rentalPropertyType([type]/*, hash*/) {
  if (communityPropertyTypes.includes(type)) {
    return 'Community';
  }

  return 'Standalone';
}

export default Ember.Helper.helper(rentalPropertyType);

Handlebars 会从模板中传递一个参数数组到我们的 helper 中。我们将使用 ES2015 解构来得到数组中的第一个元素，并且将其命名为 type。紧接着，我们可以检查 type 是否存在于我们的 communityPropertyTypes 数组。

现在，我们将在我们的浏览器中看到第一条租赁信息的属性被罗列为 “Standalone”，而另外两条的则是 “Community”。

---

原文地址