Ember.js 2013-01-06 w/ Ember Data

Based on latest version of Ember.js with the new router. (latest ember build from 2013-01-06) Also including latest master of Ember Data (2013-01-06)

by darthdeus

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://gist.github.com/raw/4469745/b102ee742d0c014bdb21715525255069d0b828bb/ember-latest-201301062045.js"></script>
<script src="https://gist.github.com/raw/8002d19b860a9dcd0f89/1b8ed4a66ef696c537466e6dd23fdb76dc804b57/ember-data-latest-2013-01061909.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>Users</h1>
  
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="home">
  {{#each user in controller}}
    <h2>{{user.username}}</h2>

    <ul>
      {{#each item in user.items}}
      <li>{{item.number}}</li>
      {{/each}}
    </ul>
  
    <button {{action "addNewItem" user}}>add item</button>
  {{/each}}
</script>

JavaScript

App = Ember.Application.create();

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

App.Store = DS.Store.extend({
  revision: 11,
  adapter: "DS.FixtureAdapter"
});

App.User = DS.Model.extend({
  username: DS.attr("string"),  
  items: DS.hasMany("App.Item"),
  
  // add new number with value double of the previous one
  addNewItem: function () {
    var newRecord;
    
    if (this.get("items.length") == 0) {
      newRecord = App.Item.createRecord({ number: 1 });
    } else {
      var newNumber = this.get("items.lastObject.number") * 2;
      newRecord = App.Item.createRecord({ number: newNumber });
    }
    this.get("items").pushObject(newRecord);
  }
});

App.HomeController = Ember.ArrayController.extend({
  addNumber: function(user) {
    user.addNewNumber();
  }
});

App.User.FIXTURES = [ { id: 1, username: "johndoe" } ];

App.Item = DS.Model.extend({
  user: DS.belongsTo("App.User"),
  number: DS.attr("number")
});

App.Router = Ember.Router.extend();
App.Router.map(function (match) {
  match("/").to("home");
});

App.HomeRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }
});