Ember Latest

The latest build of Ember.

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='index'>
      <div>
          <form class="form-horizontal" role="form">
              <div class="form-group">
                  <label class="col-sm-2 control-label">Name</label>
                  <div class="col-sm-10">
                      <p class="form-control-static">{{fullName}}</p>
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">Company</label>
                  <div class="col-sm-10">
                      <p class="form-control-static">{{company.name}}</p>
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">Paginated Tasks</label>
                  <div class="col-sm-10">
                      <p class="form-control-static">
                          <ul>  
                            {{#each task in paginatedTasks}}
                              <li>{{task.subject}}</li>  
                            {{/each}}
                          </ul>      
                     </p>
                  </div>
              </div>
          </script>

CSS

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

JavaScript

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

App.IndexRoute = Ember.Route.extend({
  model: function() {
      return this.store.find('person', 1);
  }
});

App.IndexController = Ember.ObjectController.extend({
    
    currentTaskPage: 0,
    
    totalTasks: 0, 
    
    tasksPerPage: 3,
    
    paginatedTasks: function() {
     
        var person = this.get('model');
        
        console.log( JSON.stringify(person));
                
        //how do i paginate the request for this 
        var tasks = person.get('tasks');
                
        return tasks;
    }.property()
});

App.Taskable = DS.Model.extend({

    tasks: DS.hasMany('task', { async: true })
});

App.Task = DS.Model.extend({

    subject: DS.attr('string'),

    taskable: DS.belongsTo('taskable', { polymorphic: true})
});

App.Person = App.Taskable.extend({

  firstName: DS.attr('string'),

  lastName: DS.attr('string'),

  email: DS.attr('string'),

  company: DS.belongsTo('company'),

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')

});

App.Company = App.Taskable.extend({

    name: DS.attr('string'),

    people: DS.hasMany('person')
});

$.mockjax({
    url: '/people/1',
    response: function(respond) {
        var json = {
            person: {
                id: 1, 
                firstName: 'yehuda', 
                lastName: 'katz', 
                company: 1,  
                links: { tasks: '/people/1/tasks' }
            }            
        };
        respond.success(json);
    }
});

$.mockjax({
    url: '/companies/1',
    response: function(respond) {
        var json = {
            company: {id: 1, name: 'Tilde' }            
        };
        respond.success(json);
    }
});

$.mockjax({
    url: '/people/1/tasks',
    response: function(respond) {
        var json = {
            tasks: [ 
                {id: 1, subject: 'My task 1', taskable: { type: "person", id: 1} }, 
              ...