2 min read

Ember.js 不用 Ember Data 如何创建模型

Note:本文基于 Ember.js 1.4.0

Ember.js 的文档中,Model(模型)部分1赫然是围绕 Ember Data 2写的。这就让人产生一个疑问,如果不用 Ember Data 会怎样?毕竟我可能出于以下各种理由拒绝使用它:

  1. 不喜欢它
  2. 它还不稳定
  3. 后端开发的 RESTful 3API 风格不够正,Ember Data 不适用
  4. 其他

当然,不用它并不会怎样,因为我们还有许多轻量的替代品4,要是这些也都不喜欢,我们还可以手写 5ajax 来创建 Ember.js 的模型部分6

window.App = Ember.Application.create(); // 创建 App 实例

App.Router.map(function() {
  this.route('person');
});

App.Model = Ember.Object.extend({}); // 定义一个 Model 类,所有 Model 都继承自它

App.Person = App.Model.extend({
  firstName: null,
  lastName: null,
  age: null,
  gender: null
}); // 定义一个 Person 类

// 假定取得所有 person 的 api 接口为 http://www.zfanw.com/api/person.php
// 返回的数据结构是 {"people": [{"firstName": "Sam", "lastName": "Chen", "age": 18, "gender": "male"},{"firstName": "Jane", "lastName": "White", "age": 18, "gender": "female"}]}

接下来用 reopenClass 7给 Person 类增加一个方法,这个方法用于返回所有的 Person 实例:

App.Person.reopenClass({ 
  findAll: function() {
    return $.get('http://www.zfanw.com/api/person.php').then(
      function(response) {
        return response.people.map(function(person) { // map 是 JavaScript 的方法
          return App.Person.create(person);
        });
      }
    );
  }
});

这样,在 Route 里我们就可以设置 Model 了:

App.PersonRoute = Ember.Route.extend({
  model: function() {
    return App.Person.findAll();
  },
  setupController: function(controller, model) {
    controller.set('model', model);
    // 也可以写成 controller.set('content', model)
  }
});

之后可以在 Handlebars.js 模板里使用模型数据了8

<table class=table>
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
</thead>
<tbody>
{{#each}}
  <tr>
    <td>{{firstName}} {{lastName}}</td>
    <td>{{age}}</td>
    <td>{{gender}}</td>
  </tr>
{{/each}}
</tbody>
</table>
报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo