Ember Latest

The latest build of Ember.

by Abdull

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.6/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>ember - Controller inheritence test</h1>
  <ul>
    <li>{{#link-to "normal"}}Go to NormalRoute{{/link-to}}</li>
    <li>{{#link-to "extended"}}Go to ExtendedRoute{{/link-to}}</li>
  </ul>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  Select a route
</script>

<script type="text/x-handlebars" data-template-name="normal">
  <h2>Normal Route:</h2>
  <ul>
    {{#each}}
      <li>{{firstName}} {{lastName}}</li>
    {{/each}}
  </ul>
  <button {{action "uppercase"}}>make uppercase</button>
</script>

<script type="text/x-handlebars" data-template-name="extended">
  <h2>Extended Route:</h2>
  <ul>
    {{#each}}
      <li>{{firstName}} {{lastName}}</li>
    {{/each}}
  </ul>
  <button {{action "uppercase"}}>make uppercase</button>
  <button {{action "lowercase"}}>make lowercase</button>
</script>

JavaScript

App = Ember.Application.create({});

App.Person = DS.Model.extend({
    firstName: DS.attr("string"),
    lastName: DS.attr("string"),
});

App.Router.map(function () {
    this.resource("normal");
    this.resource("extended");
});

App.NormalRoute = Ember.Route.extend({
    model: function () {
        var a = this.store.createRecord("person");
        a.set("firstName", "Foo");
        a.set("lastName", "Bar");

        var b = this.store.createRecord("person");
        b.set("firstName", "Mickey");
        b.set("lastName", "Mouse");

        var c = this.store.createRecord("person");
        c.set("firstName", "Donald");
        c.set("lastName", "Duck");

        var array = [a, b, c];
        return array;
    }
});

App.ExtendedRoute = Ember.Route.extend({
    model: function () {
        var a = this.store.createRecord("person");
        a.set("firstName", "Foo");
        a.set("lastName", "Bar");

        var b = this.store.createRecord("person");
        b.set("firstName", "Mickey");
        b.set("lastName", "Mouse");

        var c = this.store.createRecord("person");
        c.set("firstName", "Donald");
        c.set("lastName", "Duck");

        var array = [a, b, c];
        return array;
    }
});

App.NormalController = Ember.ArrayController.extend({
    actions: {
        uppercase: function () {
            var models = this.get("model");
            models.forEach(function (entry, index, theArray) {
                firstName = entry.get("firstName");
                upperCaseFirstName = firstName.toUpperCase();
                entry.set("firstName", upperCaseFirstName);
            }); //forEach
        } //uppercase action
    } //actions hash
}); //NormalController

App.ExtendedController = App.NormalController.extend({
    actions: {
        lowercase: function () {
            var models = this.get("model");
            models.forEach(function (entry, index, theArray) {
                firstName = entry.get("firstName");
               ...