Ember旅程系列（四） -- 模型钩子

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

现在呢，让我给rentals页面添加一些可用的租赁信息。

Ember通过model对象来保存给页面的数据。为了简单起见，我们暂时将model对象中的数据硬编码。稍后，我们会使用Ember Data 来达成这个目的。（Ember Data – 一个给力的数据管理支持库，内置于Ember）

下面这张图片，就是主页最终的样子：

在Ember中，路由处理程序主要负责将model中的数据读取出来然后传递给页面。它通过model()钩子读取数据。叫model()为钩子的原因，是因为Ember会在需要的时候帮我们调用它。在rentals路由中添加的model()钩子，会在用户访问http://localhost:4200 或者 http://localhost:4200/rentals 的时候被调用。

打开app/routes/rentals.js ， 并且在model()钩子中返回一个数组：

app/routes/rentals.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [{
      id: 'grand-old-mansion',
      title: 'Grand Old Mansion',
      owner: 'Veruca Salt',
      city: 'San Francisco',
      propertyType: 'Estate',
      bedrooms: 15,
      image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
      description: 'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.'
    }, {
      id: 'urban-living',
      title: 'Urban Living',
      owner: 'Mike TV',
      city: 'Seattle',
      propertyType: 'Condo',
      bedrooms: 1,
      image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
      description: 'A commuters dream. This rental is within walking distance of 2 bus stops and the Metro.'

    }, {
      id: 'downtown-charm',
      title: 'Downtown Charm',
      owner: 'Violet Beauregarde',
      city: 'Portland',
      propertyType: 'Apartment',
      bedrooms: 3,
      image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
      description: 'Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet.'

    }];
  }
});

请注意，这里我们使用了ES6的语法格式。 model() 与 model : function() 是相同的。

Ember会将model()钩子中返回的数据保存在一个叫做model的属性中，该属性可以直接在rentals模版中使用。

好了，现在让我们切换到rentals模版。在模版中可以直接使用model属性来展示租赁信息。同时我们使用另一个Ember提供的Handlerbars 助手来辅助我们–{{each}}助手。这个助手会循环遍历出在model中的信息：

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 |rental|}}
  <article class="listing">
    <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>
{{/each}}

在这个模版中，每当处于某个遍历周期，那当前被遍历的对象就会被保存在名叫rental的变量中。