Ember 0.9.8.1 Template with ember-data

by dgeb

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars">
 {{#each LO.listsController.content}}
    <span>{{name}} - {{list_items.length}}</span>
    
    <ul>
      {{#each listItems}}
        name: '{{name}}'; id: {{id}}
      {{/each}}
    </ul>
  {{/each}}
</script>

JavaScript

(function() {
var get = Ember.get, set = Ember.set;

var hasEmbeddedAssociation = function(type, options) {
  options = options || {};

  var meta = { type: type, isAssociation: true, options: options, kind: 'hasMany' };

  return Ember.computed(function(key, value) {
    var data = get(this, 'data').hasMany,
        store = get(this, 'store'),
        ids, association;

    if (typeof type === 'string') {
      type = get(this, type, false) || get(window, type);
    }

    // as long as the embedded object data has been loaded,
    // attempt to load the embedded objects into the store
    if (data[key] !== undefined) {
      ids = store.loadMany(type, data[key]).ids;
    }
    association = store.findMany(type, ids || []);
    set(association, 'owner', this);
    set(association, 'name', key);

    return association;

  // NOTE: this CP should be re-evaluated when `data` changes
  }).property('data').cacheable().meta(meta);
};

DS.hasManyEmbedded = function(type, options) {
  Ember.assert("The type passed to DS.hasMany must be defined", !!type);
  return hasEmbeddedAssociation(type, options);
};

})();

LO = Ember.Application.create();

LO.List = DS.Model.extend({
  name: DS.attr('string'),
    listItems: DS.hasManyEmbedded('LO.ListItem')
});

LO.ListItem = DS.Model.extend({
  name: DS.attr('string')
});

LO.List.FIXTURES = [
  {
    "id":1,
    "name":"|FOO|",
    "listItems": [{ id: "1", "name": "foooooo" }, { id: "2", "name": "moooooo" }]
  },
  {
    "id":2,
    "name":"Bar!",
    "listItems": []
  }
];

LO.ListItem.FIXTURES = [];

LO.store = DS.Store.create({
  revision: 8,
  adapter: DS.fixtureAdapter
});

LO.listsController = Em.ArrayController.create({
    content: LO.store.findAll(LO.List)
});