Ember Routing

Simple emberjs routing test

by cherif_b

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/pangratz/data/ember-data.js"></script>
<script src="http://sanderkorvemaker.nl/jquery/js/jquery.lorem.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>My App's Title (which will be on every page, so get used to it)</h1>
      <ul class="nav">
        <li><a {{action showHome href=true}}>Home</a></li>
        <li><a {{action showAbout href=true}}>About</a></li>
        <li><a {{action showServices href=true}}>Services</a></li>
        <li><a {{action showContact href=true}}>contact</a></li>
      </ul>
      {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="home">
      <p>This is the home page.</p>
    </script>
    
    <script type="text/x-handlebars" data-template-name="about">
      <p>This is the about page.</p>
    </script>
    
    <script type="text/x-handlebars" data-template-name="services">
      <p>This is the services page.</p>
       <ul class="nav">
        <li><a {{action showService1 href=true}}>Service1</a></li>
        <li><a {{action showService2 href=true}}>Service2</a></li>
      </ul>
      {{outlet}}
    </script>
    
    
    <script type="text/x-handlebars" data-template-name="contact">
      <p>This is the contact page.</p>
    </script>
    
    <script type="text/x-handlebars" data-template-name="service1">
      <p>This is the service1 page.</p>
    </script>
    
    <script type="text/x-handlebars" data-template-name="service2">
      <p>This is the service2 page.</p>
    </script>

JavaScript

App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.ServicesController = Ember.Controller.extend();

App.HomeView                = Ember.View.extend({ templateName: 'home'});
App.AboutView               = Ember.View.extend({ templateName: 'about'});
App.ServicesView            = Ember.View.extend({ templateName: 'services'});
App.Service1View            = Ember.View.extend({ templateName: 'service1'});
App.Service2View            = Ember.View.extend({ templateName: 'service2'});
App.ContactView             = Ember.View.extend({ templateName: 'contact'});

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    home: Ember.Route.extend({
      route: '/',
      connectOutlets: function (router) {
              router.get('applicationController').connectOutlet('home');
      }
    }),
    about: Ember.Route.extend({
            route: '/about',
            connectOutlets: function (router) {
              router.get('applicationController').connectOutlet('about');
         }
     }),
     services: Ember.Route.extend({
            route: '/services',
            connectOutlets: function (router) {
              router.get('applicationController').connectOutlet('services');
            },
            'service1':Ember.Route.extend({
                route:'/service1',
                connectOutlets: function (router) {
                    router.get('servicesController').connectOutlet('service1');
                }
            }),
            'service2':Ember.Route.extend({
                route:'/service2',
                connectOutlets: function (router) {
                    router.get('servicesController').connectOutlet('service2');
                }
            }),
            showService1: Ember.Route.transitionTo('service1'),
            showService2: Ember.Route.transitionTo('service2')
    }),
     contact: Ember.Route.extend({
  ...