Ember Router Example

by fangyang

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css">
<script type="text/x-handlebars" data-template-name="application">
  <div class="row">
    <div class="twelve columns">
      <nav class="top-bar">
        <ul>
          <li class="name">
            <h1>
              {{#linkTo "index.home"}}{{unbound App.title}}{{/linkTo}}
            </h1>
          </li>
          <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>
          {{view view.NavbarView}}
          <ul class="right">
            <li>
              <a href="#">
                Right Link 
              </a>
            </li>
          </ul>
        </section>
      </nav>
    </div>
    <div class="twelve columns">
      {{outlet}}
    </div>
    <div class="twelve columns">
      {{view App.FooterView}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="home">
  Home
</script>

<script type="text/x-handlebars" data-template-name="bio">
  Bio
</script>

<script type="text/x-handlebars" data-template-name="menu-item">
  <a {{action gotoRoute item on="click" target="view.parentView"}}>
  {{item.displayText}}
  </a>
</script>

<script type="text/x-handlebars" data-template-name="navbar">
  <ul class="left">
    {{#each item in controller}}
      {{view view.MenuItemView itemBinding="item"}}
    {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="footer">
 <footer>
   <div class="row">
     <div class="twelve columns">
       &copy; since 2013 - {{unbound App.author}}
     </div>
   </div>
  </footer>
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script type="text/javascript" src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script...

CSS

a {cursor: pointer}

JavaScript

window.App = Em.Application.create({
  title: 'Sample App',
	author: '[your name here]'
});

App.NavItem = Em.Object.extend({
  displayText: '',
  routePath: '',
  routeName: ''
});

App.ApplicationView = Em.View.extend({
  templateName: 'application',
  NavbarView: Em.View.extend({
    init: function() {
      this._super();
      this.set('controller', this.get('parentView.controller').controllerFor('navbar'))
    },
    selectedRouteName: 'home',
    gotoRoute: function(e) {
      this.set('selectedRouteName', e.routeName);
      this.get('controller.target.router').transitionTo(e.routePath);
    },
    templateName: 'navbar',
    MenuItemView: Em.View.extend({
      templateName:'menu-item',
      tagName: 'li',
      classNameBindings: 'IsActive:active'.w(),
      IsActive: function() {
        return this.get('item.routeName') === this.get('parentView.selectedRouteName');
      }.property('item', 'parentView.selectedRouteName')
    })
  })
});

App.NavbarController = Em.ArrayController.extend({
  content: [],
  init: function() {
    var home = App.NavItem.create({
      displayText: 'Home',
      routePath: 'index.home',
      routeName: 'home'
    });
    
    var bio = App.NavItem.create({
      displayText: 'Bio',
      routePath: 'index.bio',
      routeName: 'bio'
    });
    
    this.set('content', [home, bio]);
  }
});

App.FooterView = Em.View.extend({
		templateName: 'footer'
});

App.HomeView = Em.View.extend({
	templateName: 'home'
});

App.IndexHomeRoute = Em.Route.extend({
	enter: function() {
		console.log('home route');
    $(document).attr("title", "Home");
	}, 
	renderTemplate: function() {
		this.render('home');
	}
});

App.IndexBioRoute = Em.Route.extend({
	enter: function() {
		console.log('bio route');
    $(document).attr("title", "Bio");
	}, 
	renderTemplate: function() {
		this.render('bio');
	}
});

App.IndexRoute = Em.Route.extend({
	enter: function() {
		console.log('index route');
	},
	redirect: function()...