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.jsimport 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的变量中。