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 - Object 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: {{message}}</h2>
  <ul>
      <li>{{firstName}} {{lastName}}</li>
  </ul>
  <button {{action "uppercase"}}>make uppercase</button>
</script>

<script type="text/x-handlebars" data-template-name="extended">
  <h2>Extended Route: {{message}}</h2>
  <ul>
      <li>{{firstName}} {{lastName}}</li>
  </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");

        return a;
    }
});

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

        return a;
    }
});

App.NormalController = Ember.ObjectController.extend({
    message: "This is NormalController",
    init: function() {
      console.log("initializing NormalController");  
    },
    actions: {
        uppercase: function () {
            var model = this.get("model");
            var firstName = model.get("firstName");
            var modifiedFirstName = firstName.toUpperCase();
            model.set("firstName", modifiedFirstName);
        } //uppercase action
    } //actions hash
}); //NormalController

App.ExtendedController = App.NormalController.extend({
    message: "This is ExtendedController",
    init: function() {
      this._super();
      console.log("initializing ExtendedController");  
    },
    actions: {
        lowercase: function () {
            var model = this.get("model");
            var firstName = model.get("firstName");
            var modifiedFirstName = firstName.toLowerCase();
            model.set("firstName", modifiedFirstName);            
        } //lowercase action
    } //actions hash
}); //ExtendedController