Ember.js Starter Kit

Based on latest version of Ember.js with the new router.

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://gist.github.com/raw/4448737/094bbef8f231d412a559e0543fd56c4bd5e84acf/ember-latest.js"></script>
<script src="https://gist.github.com/raw/4448781/59ba39321577a58b148a6af1895b10974a088c1c/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>Ember forms</h1>
  
  {{outlet}}
  
  <p>{{#linkTo "newUser"}}create new user{{/linkTo}}</p>
  <p>{{#linkTo "users"}}show all users{{/linkTo}}</p>
</script>

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

<script type="text/x-handlebars" data-template-name="new-user">
  <form>
    <label>
      Username: {{view Ember.TextField valueBinding="controller.username"}}
    </label>

    {{#if controller.usernameInvalid}}username must be at least 5 characters{{/if}}
   
    <div>
      <button {{action "createUser"}}>Create user</button>
    </div>
    
  </form>
</script>

<script type="text/x-handlebars" data-template-name="user">
  Showing user: {{username}}
</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"),
  
  usernameInvalid: function() {
    return this.get("username.length") < 5;
  }.property("username")
});

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

App.UsersController = Ember.ArrayController.extend();

App.Router = Ember.Router.extend();

App.Router.map(function(match) {
  match("/").to("users");
  match("/new").to("newUser");
  match("/:user_id").to("user");
});

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

App.NewUserView = Ember.View.extend({
  templateName: "new-user"
});

App.NewUserController = Ember.ObjectController.extend({
  createUser: function() {
    this.get("content").on("didCreate", function() {
      // I know this was deprecated, but how are we supposed to do it,
      // when there's nothing like App.router or this.get("router")
      App.container.lookup("router:main").transitionTo("user", this);
    });
        
    // in real world we would have a server side validation here,
    // which results in 422 status code and doesn't trigger
    // the "didCreate" callback
    this.get("store").commit();
  }
});

App.UsersRoute = Ember.Route.extend({
  setupControllers: function() {
    this.controllerFor("users").set("content", App.User.find());
  }
});