執(zhí)行視圖路由

在本部分中，我們增加一個員工細節(jié)視圖。由于現(xiàn)在該應(yīng)用程序有一個以上的視圖，我們也增加一個簡單的視圖路由機制。

步驟1：創(chuàng)建員工模板。

打開index.html，并添加一個模板，以提供詳細的員工視圖：

<script id="employee-tpl" type="text/template">
      <header class="bar bar-nav">
          <a class="btn btn-link btn-nav pull-left" href="#">
              <span class="icon icon-left-nav"></span>
          </a>
          <h1 class="title">Employee</h1>
      </header>
      <div class="content">
          <div class="card">
              <ul class="table-view">
                  <li class="table-view-cell media">
                      <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
                      <div class="media-body">
                          {{ firstName }} {{ lastName }}
                          <p>{{ title }}</p>
                      </div>
                  </li>
                  <li class="table-view-cell media">
                      <a href="tel:{{ officePhone }}" class="push-right">
                          <span class="media-object pull-left icon icon-call"></span>
                          <div class="media-body">
                              Call Office
                              <p>{{ officePhone }}</p>
                          </div>
                      </a>
                  </li>
                  <li class="table-view-cell media">
                      <a href="tel:{{ cellPhone }}" class="push-right">
                          <span class="media-object pull-left icon icon-call"></span>
                          <div class="media-body">
                              Call Cell
                              <p>{{ cellPhone }}</p>
                          </div>
                      </a>
                  </li>
                  <li class="table-view-cell media">
                      <a href="sms:{{ cellPhone }}" class="push-right">
                          <span class="media-object pull-left icon icon-sms"></span>
                          <div class="media-body">
                              SMS
                              <p>{{ cellPhone }}</p>
                          </div>
                      </a>
                  </li>
                  <li class="table-view-cell media">
                      <a href="mailto:{{ email }}" class="push-right">
                          <span class="media-object pull-left icon icon-mail"></span>
                          <div class="media-body">
                              Email
                              <p>{{ email }}</p>
                          </div>
                      </a>
                  </li>

              </ul>
          </div>
      </div>
  </script>

步驟2：創(chuàng)建EmployeeView類

1、在js目錄創(chuàng)建一個命名為EmployeeView.js的文件，并定義它如下：

var EmployeeView = function(employee) {

  this.initialize = function() {
      this.$el = $('<div/>');
  };

  this.render = function() {
      this.$el.html(this.template(employee));
      return this;
  };

  this.initialize();

}

2、在index.html中，增加一個腳本標簽以包含EmployeeView.js（僅在app.js的腳本標簽之前）。

<script src="js/EmployeeView.js"></script>

步驟3：執(zhí)行視圖路由

1、在index.html中，增加一個腳本標簽以包含router.js（僅在jquery.js的腳本標簽之前）。

<script src="lib/router.js"></script>

2、打開app.js。增加編譯的員工模板到EmployeeView的原型：

EmployeeView.prototype.template = Handlebars.compile($("#employee-tpl").html());

3、在應(yīng)用程序中定義兩個使用的路由：

service.initialize().done(function () {
  router.addRoute('', function() {
      $('body').html(new HomeView(service).render().$el);
  });

  router.addRoute('employees/:id', function(id) {
      service.findById(parseInt(id)).done(function(employee) {
          $('body').html(new EmployeeView(employee).render().$el);
      });
  });

  router.start();
});

4、測試應(yīng)用程序。