模型钩子

优质

小牛编辑

130浏览

2023-12-01

Ember将一个页面的数据保存在一个名为model的对象中。为了简单起见，我们将使用硬编码的JavaScript对象数组填写我们的租赁列表页面的模型。之后，我们将切换到使用Ember Data，这是一个在应用程序中管理数据的库。
在Ember中，路由处理器(handler)负责为页面加载模型。model是一个钩子函数，这意味着Ember会在应用中约定的时间调用它。
现在，让我们打开rentals路由处理器文件app/routes/rentals.js，在model函数中返回租赁对象数组:

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()。
然后，就是在模板文件中显示模型中的数据。编辑模板文件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 } }

在这里，我们使用了另一个常用的Handlebars助手{ { each } }。这个助手将让我们循环遍历我们的模型中的每个租赁对象。

租赁列表的验收测试

要自动测试检查租赁列表是否正常，我们将创建一个测试来访问索引路线，并检查是否显示3个列表。
在app/templates/rentals.hbs中，每个租赁展示包装在一个article元素中，并赋予它一个类型listing。我们将使用listing类型来查看页面上显示的租赁数量。
要找到有一个类型是listing的元素，我们使用一个名为find的测试助手。该find函数返回与给定CSS选择器的元素。在这种情况下，它将返回一个类型是listing的所有元素的数组。
编辑测试代码tests/acceptance/list-rentals-test.js，将测试'should list available rentals.'的测试内容修改下面的样子：

test('should list available rentals.', function (assert) {
  visit('/');
  andThen(function() {
    assert.equal(find('.listing').length, 3, 'should see 3 listings');
  });
});

再次运行ember t -s命令来启动验收测试。