Ember旅程系列（六） -- 创建简单组件

英文原版：https://guides.emberjs.com/v2.13.0/tutorial/simple-component/

当用户在浏览我们的租赁列表的时候，他可能需要网页提供一些交互可以帮助他做决定。那让我们给所有租赁信息都加上一个可以切换图片大小的功能。为了实现这个功能，我们将会使用组件。

现在生成一个名叫 retal-listing的组件，用它来管理每条租赁信息的行为。命名组件时必须要加上 “-”符号，这样做是为了避免与HTML元素名称起冲突。所以 retal-listing 是合法的命名，但是retal是不合法的命名。命令：

ember g component rental-listing

输出如下：

installing component
  create app/components/rental-listing.js
  create app/templates/components/rental-listing.hbs
installing component-test
  create tests/integration/components/rental-listing-test.js

组件由两部分组成：

1. 一个模版 – 用来描述组件的长相。
2. 一个javascript源文件，用来定义组件的行为。

【注】：路由也是这样的构成

开始动手！！ 首先要做的是，把rentals.hbs中的显示租赁信息的代码转移到rental-listing.hbs中去：

app/templates/components/rental-listing.hbs

<article class="listing">
  <img src="{{rental.image}}" alt="">
  <h3>{{rental.title}}</h3>
  <div class="detail owner">
    <span>Owner:</span> {{rental.owner}}
  </div>
  <div class="detail type">
    <span>Type:</span> {{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>

接下来 ， 改动rentals.hbs中的代码，在这个文件的{{each}}助手中，调用我们刚刚创建的组件。

app/templates/rentals.hbs

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome!</h2>
  <p>
    We hope you find exactly what you're looking for in a place to stay.
  </p>
  {{#link-to 'about' class="button"}}
    About Us
  {{/link-to}}
</div>

{{#each model as |rentalUnit|}}
  {{rental-listing rental=rentalUnit}}

  <!-- 其他的代码刚刚被移动到  rental-listing.hbs中了-->

{{/each}}

我们通过组件名称ental-listing来调用它，并且每次循环时都把retalUnit变量赋值给组件的rental属性。

我们的应用应该跟之前看起来一样，重启服务器看看效果：

切换图片显/隐

现在我们添加个功能，就是能让客户来决定是否显示图片。

我们通过{{if}}助手，来控制仅当isWide属性为true时，才会将当前的图片放大（通过添加 “wide” 类）。我们当然会加上一些描述信息来指示图片是可以被点击的。

app/templates/components/rental-listing.hbs

<article class="listing">
  <a 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.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>

isWide属性和它的值定义在组件的javascript源文件中 – rental-listing.js。 假设我们需要图片默认展示小尺寸，那就给isWide 赋值为false：

app/components/rental-listing.js

import Ember from 'ember';

export default Ember.Component.extend({
  isWide: false
});

为了让用户可以放大图片，需要添加一个动作来切换isWide属性的值。添加个名为 “toggleImageSize” 的动作 ：

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

点击a元素时，会发送给组件一个动作指令。 然后Ember将会调用定义在组件的actions对象中的 toggleImageSize()。

actions 定义在组件中的，包含了自定义回调函数的对象。这些函数会在用户交互的时候被调用，比如：点击。

接下来创建这个toggleImageSize()函数，并且在函数中处理isWide值的切换：

app/components/rental-listing.js

import Ember from 'ember';

export default Ember.Component.extend({
  isWide: false,
  actions: {
    toggleImageSize() {
      this.toggleProperty('isWide');
    }
  }
});

好了，现在当我们点击图片或者”View Larger” 链接时，图片就会被放大。当再次点击时，图片就会缩小。

本节完