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/release/ember.js"></script>
<script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.16.1/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Ember Data Parent/Child Render</h1>
    {{#link-to 'parent_model' 1}}Parent 1{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="parent_model">
  <h2>Parent Model</h2>
  <h3>name: {{model.name}}</h3>
  <p>
      <a {{action 'saveParent' on='click'}}>click here to save</a>
  </p>
  <ul>
  {{#each child in model.children}}
      {{render "childModel" child}}
  {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="child_model">
  <li>
      <h2>Child Template - {{child.name}}</h2>
      <a {{action 'toggleExpand' on='click'}}>click here to expandddddd</a>
      {{#if isExpanded}}
          <div style="height: 200px; background: red;">
              this is the expanded part of the child
          </div>
      {{/if}}
    
  </li>
</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.ApplicationAdapter = DS.ActiveModelAdapter.extend();

App.Router.map(function(){
    this.resource('parent_model', { path:'/parent_model/:parent_id' }, function() {
        
    });
});

App.ParentModel = DS.Model.extend({
    name: DS.attr('string'),
    children: DS.hasMany('childModel',{async:true})
});

App.ChildModel = DS.Model.extend({
    parent: DS.belongsTo('parentModel',{async:true}),
    name: DS.attr('string')
});

$.mockjax({
    url: '/parent_models/1',
    responseText: {
        parent: { id: 1, name: 'parent', child_ids: [1,2,3] }
    }        
});

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        this.store.push('childModel', { id: 1, name: 'child 1' });
        this.store.push('childModel', { id: 2, name: 'child 2' });
        this.store.push('childModel', { id: 3, name: 'child 3' });
        this.store.push('parentModel',{ id: 1, name: 'parent' });
        var self = this;
        this.store.find('parentModel',1).then(function(parentModel) {
            self.store.find('childModel',1).then(function(childModel) {
                parentModel.get('children').pushObject(childModel);
            });
            self.store.find('childModel',2).then(function(childModel) {
                parentModel.get('children').pushObject(childModel);
            });
            self.store.find('childModel',3).then(function(childModel) {
                parentModel.get('children').pushObject(childModel);
            });
        });
    }
});

App.ParentModelSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
    init: function() {
        this._super();
        console.log('serializer called');
    },
    attrs: {
        children: { serialize: 'ids' }   
    }
});

App.ParentModelRoute = Ember.Route.extend({
    model: function(){
      var curmodel = this.store.find('parentModel',1);
      console.log(curmodel);
      return curmodel;
    },
    actions: {
       ...