Ember.js 路由（Routing）

由于{{outlet}}的内容是根据路由选择后动态获取的模板内容，所以我们先介绍Ember程序的路由，它可以帮助管理应该程序的状态和用户导航所需资源的资源；当我们的应用程序启动时，路由是负责显示模板，加载数据，以及管理应用程序的状态。

现在，我们通过指定URL方式义来定义应用程序的路由，具体定义如下：

// Defines a goal routing home and
// the detail information of employee routing.
App.Router.map(function() {
    this.route("home", {path: "/"});
    this.route("employee", {path: "/employee/:employee_id"});
});

上面，我们定义了两个路由分别是：应用程序的全局路由home和employee，在index页面进行加载同时访问home路由的模板，数据和应用程序状态；而employee路由将根据employee_id访问每个一个员工的基本信息。

接下来，我们定义home模板，具体实现如下：

<script type="text/x-handlebars" data-template-name="home">
        <h3>Employee Information</h3>
        <ul>
        {{#each item in employeeInfo}}
        <li>item</li>
        {{each}}
        </ul>
</script>

上面，我们定义了home模板，并且使用了each表达来迭代访问employeeInfo对象中的元素，这时我们又有一个疑问了，那就是employeeInfo对象从哪里获取呢？

前面，我们提到Controller负责从Model中获取数据，然后通过模板加载显示，那么我们可以通过显市定义Controller来获取数据，如果我们不定义的话，Ember会自动生成一个HomeController。

// Defines a custom controll.
 App.HomeController = Ember.Controller.extend({
      employeeInfo: ['Jackson Huang', 'Ada Li', 'JK Rush']
 });

上面，我们自定义了HomeController并且初始化了employeeInfo数组，现在我们刷新一下index页面。

Index页面

现在，我们又有一个疑问了，假如，我们程序有很多资源要访问，那么我们是否都显式地定义Controller呢？

其实，我们还可以通过定义路由控制器实现自动选择控制器，而且Ember会自动生成相应的Controller无需我们编写任何代码，具体实现如下：

  // Defines a routing handler.
  App.HomeRoute = Ember.Route.extend({
    model: function(){
     return ['Jackson Huang', 'Ada Li', 'JK Rush'];
   },
   setupController: function(controller, model){    
    controller.set('content', model)
  }
});

现在，我们定义了路由控制器App.HomeRoute并且重写了方法setupController，它接收路由处理程序匹配的控制器作为第一个参数即HomeController，接着我们给HomeController传递model参数，那么HomeController就可以获取相应的数据并且加载到模板中显示了。

上面，我们成功把数据加载到页面中，但是数据都是直接hardcode在Controller中，我们并没有定义Model来获取数据。

接下来，我们将实现从Fixtures中获取数据，这时我们需要使用ember-data.js库，具体实现如下。

// Customs a store.
App.Store = DS.Store.extend({
  // Notify the version of ember data api used.
  revision: 12,
 
  // Used FixtureAdapter.
  adapter: 'DS.FixtureAdapter'
});

上面，我们在app.js中定义DS.Store的子类App.Store，并且申明我们程序使用Ember data api的版本是12，当api版本更新或使用的版本太旧时，ember-data.js就会返回相应的错误信息。

例如：当前的ember-data.js版本是12，如果我们在app.js中定义使用的是版本1的api，在控制台中我们就会看到以下的错误信息。

ember-data.js版本信息

转载本站内容时，请务必注明来自W3xue，违者必究。