Module 10: Implementing View Routing

In this section, we add a session details view. Since the application now has more than one view, we also add a simple view routing mechanism.

Step 1: Create the session template

Open index.html and add a template to render a detailed session view:

  <script id="session-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">Session Detail</h1>
      </header>

      <!-- NOTE: Bars MUST come before content -->
      <nav class="bar bar-tab tabbar">

      </nav>

      <div class="content">
          <div class="card">

              <ul class="table-view">
                  <li class="table-view-cell media">
                      <img class="media-object pull-left" src="assets/pics/{{pic}}">
                      <div class="media-body">
                          {{ firstName }} {{ lastName }}
                          <p>{{ title }}</p>
                      </div>
                      <p>{{ room }} | {{ time }}</p>

                  </li>                
                  <li class="table-view-cell media" style="min-height: 250px">
                      <div> <p>{{ description }}</p></div>
                  </li>                
              </ul>
          </div>          
      </div>

If you're wondering why the tab bar is empty, we'll be adding content to it in a later lesson.

Step 2: Create the SessionView class

Create a file named SessionView.js in the js directory, and define it as follows:

  var SessionView = function(session) {

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

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

      this.initialize();
  }

In index.html, add a script tag to include SessionView.js (just before the script tag for app.js):

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

Step 3: Implement View Routing

In index.html, add a script tag to include router.js (just after the script tag for jquery.js):

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

Open app.js. Add the compiled session template to the prototype of SessionView:

  SessionView.prototype.template = Handlebars.compile($("#session-tpl").html());

Define the two routes used in the application:

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

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

      router.start();
  });

Test the application.

Previous Next

modules

Follow @devgirlfl