创建handlebars助手

到目前为止，我们的应用程序直接显示了我们的Ember Data模型中的用户数据。随着我们的应用程序的发展，我们将会在将数据提供给用户之前进一步操纵数据。为此，Ember提供Handlebars模板助手来装饰模板中的数据。让我们使用一个Handlebars助手来让用户快速看到一个属性是“独立”还是“社区”的一部分。

生成一个rental-property-type助手：

$ ember g helper rental-property-type
installing helper
  create app/helpers/rental-property-type.js
installing helper-test
  create tests/integration/helpers/rental-property-type-test.js

更新我们的rental-listing组件模板以使用新助手并传入rental.propertyType。新的模板文件(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.propertyType } }
      - { { rental.propertyType } }
  </div>
  <div class="detail location">
    <span>Location:</span> { { rental.city } }
  </div>
  <div class="detail bedrooms">
    <span>Number of bedrooms:</span> { { rental.bedrooms } }
  </div>
</article>

下面实现rental-property-type助手。首先定义了一个房产社区类型数组常量(communityPropertyTypes)，然后定义了一个函数rentalPropertyType。在函数中检查传入的参数，然后参数与数组中的值匹配，说明是个社区房产(Community)，不匹配说明是个独立庄园(Standalone)。
app/helpers/rental-property-type.js:

import Ember from 'ember';

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

export function rentalPropertyType([propertyType]) {
  if (communityPropertyTypes.includes(propertyType)) {
    return 'Community';
  }

  return 'Standalone';
}

export default Ember.Helper.helper(rentalPropertyType);

助手中的每个参数将被添加到一个数组中，并传递给我们的助手。例如，{ { my-helper "foo" "bar" } }会导致myHelper(["foo", "bar"])。使用数组ES2015解析赋值，我们可以在数组中命名预期的参数。在上面的示例中，模板中的第一个参数将被分配给propertyType。这为您的助手提供了灵活的表达式界面，包括可选参数和默认值。
通过ember s启动Ember服务器，然后用浏览器访问4200端口。应该看到第一个出租物业被列为“独立”，而另外两个被列为“社区”。

集成测试

修改测试代码以包含本节的内容。 tests/integration/helpers/rental-property-type-test.js:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('rental-property-type', 'helper:rental-property-type', {
  integration: true
});

// Replace this with your real tests.
test('it renders', function(assert) {
  this.set('inputValue', '1234');

  this.render(hbs`{ { rental-property-type inputValue } }`);

  assert.equal(this.$().text().trim(), 'Standalone');
});