mail box example

mailapp.js

Mail = Ember.Application.create();


// Let's pretend that Javascript can handle mutliline strings nicely:
Mail.ApplicationView = Ember.View.extend({
  template: Ember.Handlebars.compile('
  <!-- this gets replaced with content based on state when 
       connectOutlet is called on ApplicationController -->
    {{outlet}}
  ')
})
Mail.ApplicationController = Ember.Controller.extend();

Mail.MailboxesView = Ember.View.extend({
  template: Ember.Handlebars.compile('
    <div class="iOS-navbar">
      <h1>Mailboxes</h1>
    </div>
    
    <h2>Inboxes</h2>
    <ul>
      {{#each mailbox in controller}}
        <!-- this action gets called on the router with mailbox as the argument -->
        <li {{action showMailbox mailbox}}>{{mailbox.name}} {{mailbox.messages.length}}</li>
      {{/each}}
    </ul>
  ')
})
Mail.MailboxesController = Ember.ArrayController.extend({})

Mail.MailboxView = Ember.View.extend({
  template: Ember.Handlebars.compile('
    <div class="iOS-navbar">
      <!-- calls goBack, which will behave appropriately based on
          the definition of goBack in the state we are in -->
      <button {{action goBack}}>All Mailboxes</button>
      <h1>{{name}}</h1>
    </div>
    
    <!-- this gets replaced with content when connectOutlet is called on
         MailboxController. In this app, either the message list or a single message
         depending on state -->
    {{outlet}}
  ')
})
Mail.MailboxController = Ember.ObjectController.extend({})

Mail.MessagesView = Ember.View.extend({
  template: Ember.Handlebars.compile('
    <ul>
      {{#each message in controller}}
        <!-- this action gets called on the router with mailbox as the argument -->
        <li {{action showMessage message}}>
          {{message.sender}}
          {{message.sendDate}}
          {{message.title}}
          {{message.bodyTeaser}}
        </li>
      {{/each}}
    </ul>
  ')
})
Mail.MessagesController = Ember.ArrayController.extend({})

Mail.MessageView = Ember.View.extend({
  template: Ember.Handlebars.compile('
    <div class="from">{{sender}}</div>
    <div class="to">{{recipient}}</div>
    <div class="title">{{title}}</div>
    <div class="body">{{body}}</div>
  ')
})
Mail.MessageController = Ember.ObjectController.extend({})

Mail.Router = Ember.Router.extend({
  enableLogging: true, // check console for notifications about state changes
  location: 'none', // don't show URLs on mobile
  
  // acts as the route set
  root: Ember.Route.extend({
    mailboxes: Ember.Route.extend({
      all: Ember.Route.extend({
        
        // called from a view. Transitions to the route 'root.mailboxes.one'
        showMailbox: Ember.Route.transitionTo('one'), 
        
        connectOutlets: function(router){
          // replaces {{outlet}} in application template with
          // a render instance of MailboxesView, connected to an instance of 
          // MailboxesController, with the content set to the second arg:
          router.get('applicationController').connectOutlet('mailboxes', Mail.Mailbox.all());
        }
      }),
      message: Ember.Route.extend({
        hasContext: true,
        goBack: Ember.Route.transitionTo('one'),
        connectOutlets: function(router, context){
          // replaces {{outlet}} in mailbox template with
          // a render instance of MessageView, connected to an instance of 
          // MessageController, with the content set to the second arg, a single message
          router.get('mailboxController').connectOutlet('message', context));
        }
      }),
      one: Ember.Route.extend({
        // if you were using URLs, this would be true
        // if the url pattern had a dynamic slug. Since
        // we're not using URLs, we have to specifiy,
        // otherwise a context will not be passed along.
        hasContext: true,
        
        // actions called from Views
        goBack: Ember.Route.transitionTo('all'),
        showMessage: Ember.Route.transitionTo('message'),
        
        // context pass from the {{action}} call in the template, through
        // the transition, to here.
        connectOutlets: function(router, context){
          // replaces {{outlet}} in application template with
          // a render instance of MailboxView, connected to an instance of 
          // MailboxController, with the content set to the second arg:
          router.get('applicationController').connectOutlet('mailbox', context);
          
          // replaces {{outlet}} in mailbox template with
          // a render instance of MessagesView, connected to an instance of 
          // MessagesController, with the content set to the second arg:
          // If your objects aren't Ember.Objects, you'll need to use
          // Ember.get(context, 'messages') since object literals have no 'get'
          router.get('mailboxController').connectOutlet('messages', context.get('messages'));
        }
      })
    }),
  })
})

Mail.Mailbox = Ember.Object.extend({}) // your mailbox model

Mail.Mailbox.reopenClass({
  // this will get called inside the router, usually.
  all: function({
    var ret = [];
    $.ajax({
      type: 'GET',
      url: '...',
      success: function(data){
        // data, in my example, contains all the associated data at once,
        // for simplity:
        // [
        //   {name: 'personal', messages: [...]},
        //   {name: 'work', messages: [...]}
        // ]
        this.addObjects(data)
      },
      context: ret,
    })
    
    // you must immediately return an array. This will get 
    // set as some controllers's content and then later
    // filled with data:
    // "Optimistic loading"
    return ret;
  })
})

// starts the state manager.
Mail.initialize();

// URL based routing would detect the '/' route
// but we have to trigger this manually.
Mail.router.transitionTo('mailboxes.all');