Ember JS Email Client

Demo from http://emberjs.com/ of a simple email client.

HTML

<link rel="stylesheet" href="http://emberjs.com/stylesheets/site.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div class="url">URL: {{target.url}}</div>
<aside>
    
    <ul>
        <li><h2>Mailboxes</h2></li>
        {{#each}}
            <li>
                {{#link-to "mailbox" this currentWhen="mailbox"}}
                    <span class="count">
                        {{messages.length}}
                    </span>
                    {{name}}
                {{/link-to}}
            </li>
        {{/each}}
    </ul>
</aside>

<section class="main">
    {{outlet}}
</section>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="index">
  <h1>TomsterMail</h1>
  <span class="tomster"></span>
</div>
</script>
<script type="text/x-handlebars" data-template-name="mail">
<div class="mail">
  <dl>
      <dt>From</dt>
      <dd>{{from}}</dd>
      <dt>To</dt>
      <dd>{{to}}</dd>
      <dt>Date</dt>
      <dd>{{date date}}</dd>
  </dl>
  <h4>{{subject}}</h4>
  <p>{{body}}</p>
</div>
</script>
<script type="text/x-handlebars" data-template-name="mailbox">

<table>
    <tr>
        <th>Date</th>
        <th>Subject</th>
        <th>From</th>
        <th>To</th>
    </tr>

    {{#each messages}}
        {{#link-to "mail" this tagName="tr"}}
            <td>{{date date}}</td>
            <td>{{view.isActive}}{{subject}}</td>
            <td>{{from}}</td>
            <td>{{to}}</td>
        {{/link-to}}
    {{/each}}
</table>

{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="mailbox/index">
<div class="mailbox-index">
  Select an email
</div>
</script>

<div id="routing-example">
    <div class="example-output"></div>
</div>

JavaScript

// Model
App = Em.Application.create({
    rootElement: ".example-output"
});


// Fixtures
App.FIXTURES = [
  {
    name: "Inbox",
    id: "inbox",
    messages: [
      {
        id: 1,
        subject: "Welcome to Ember",
        from: "[email protected]",
        to: "[email protected]",
        date: new Date(),
        body: "Welcome to Ember. We hope you enjoy your stay"
      }, {
        id: 2,
        subject: "Great Ember Resources",
        from: "[email protected]",
        to: "[email protected]",
        date: new Date(),
        body: "Have you seen embercasts.com? How about emberaddons.com?"
      }
    ]
  }, {
    name: "Spam",
    id: "spam",
    messages: [
      {
        id: 3,
        subject: "You have one the lottery!!!111ONEONE",
        from: "[email protected]",
        to: "[email protected]",
        date: new Date(),
        body: "You have ONE the lottery! You only have to send us a small amount of monies to claim your prize"
      }
    ]
  }, {
    name: "Sent Mail",
    id: "sent-mail",
    messages: [
      {
        id: 4,
        subject: "Should I use Ember",
        from: "[email protected]",
        to: "[email protected]",
        date: new Date(),
        body: "Ember looks pretty good, should I use it?"
      }
    ]
  }
];


App.Mailbox = Em.Object.extend();

App.Mailbox.reopenClass({
  find: function(id) {
    if (id) {
      return App.FIXTURES.findBy('id', id);
    } else {
      return App.FIXTURES;
    }
  }
});

// Routes

App.Router.map(function() {
  this.resource('mailbox', { path: '/:mailbox_id' }, function() {
    this.resource('mail', { path: '/:message_id' });
  });
});

App.ApplicationRoute = Em.Route.extend({
  model: function() {
    return App.Mailbox.find();
  }
});

App.MailRoute = Em.Route.extend({
  model: function(params) {
    return this.modelFor('mailbox').messages.findBy('id', params.message_id);
  }
});

// Handlebars helper
Ember.Handlebars.registerBoundHelper('date',...