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">
<a href="#" {{action "reloadComments"}}>Reload comments</a>
{{title}}<br/>
{{#each comments}}
{{message}}
{{/each}}
</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.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('post', 1);
},
setupController: function(controller, model) {
controller.set('model', model);
controller.set('comments', model.get('comments'));
},
actions: {
reloadComments: function() {
var post = this.controller.get('model');
var commentsPromise = this.controller.get('comments');
commentsPromise.then(function(comments) {
comments.reloadLinks();
});
}
}
});
var get = Ember.get;
DS.ManyArray.reopen({
reloadLinks: function() {
var records = get(this, 'content'),
store = get(this, 'store'),
owner = get(this, 'owner'),
type = get(this, 'type'),
name = get(this, 'name'),
resolver = Ember.RSVP.defer();
var meta = owner.constructor.metaForProperty(name);
var link = owner._data.links[meta.key];
store.findHasMany(owner, link, meta, resolver);
}
});
App.Post = DS.Model.extend({
title: DS.attr('string'),
comments: DS.hasMany('comment', {async: true})
})
App.Comment = DS.Model.extend({
message: DS.attr('string'),
post: DS.belongsTo('post')
});
$.mockjax({
url: '/posts/1',
response: function(settings) {
var json = {
post: {
id: 1,
title: 'rails is omakase',
links: { comments: '/posts/1/comments' }
}
};
settings.success(json);
}
});
$.mockjax({
url: '/posts/1/comments',
response: function(settings) {
var json = {
comments: comments
};
settings.success(json);
}
});
var comments = [];
var i = 0;
setInterval(function() {
i++;
comments.push({id: i, message: 'Whoa ' + i + '!' })
}, 500);