Ember Latest

The latest build of Ember.

by marciojunior

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="https://s3.amazonaws.com/builds.emberjs.com/ember-data-latest.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{link-to "People 1" "people1"}}
    {{link-to "People 2" "people2"}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="people1">
  <h2>People 1:</h2>
  <ul>
  {{#each}}
      <li>{{first_name}} {{last_name}}</li>
  {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="people2">
  <h2>People 2:</h2>
  <ul>
  {{#each}}
      <li>{{first_name}} {{last_name}}</li>
  {{/each}}
   </ul>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.Router.map(function() {
    this.route('people1');
    this.route('people2');
});

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        this.store.find('person');
    }
});

App.People1Route = Ember.Route.extend({
  model: function() {      
      return this.store.all('person');
  }
});

App.People2Route = Ember.Route.extend({
  model: function() {
      return this.store.all('person');
  }
});

App.Person = DS.Model.extend({
    first_name: DS.attr('string'),
    last_name: DS.attr('string')
});

$.mockjax({
    url: '/people',
    response: function(settings) {
        var json = {
            people: [
                {id: 1, first_name: 'Kris', last_name: 'Selden'},
                {id: 2, first_name: 'Luke', last_name: 'Melia'},
                {id: 3, first_name: 'Formerly Alex', last_name: 'Matchneer'}
            ]
        };
        settings.success(json);
    }
});

$.mockjax({
    url: '/people/1',
    response: function(settings) {
        var json = {
            people: {id: 1, first_name: 'Kris', last_name: 'Selden'}
        };
        settings.success(json);
    }
});