JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="https://raw.github.com/ahmacleod/data/dist/dist/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
{{#each controller}}
<h1>{{id}}</h1>
{{#each comments}}
<p>{{id}}</p>
{{/each}}
<button {{action deletePost this}}>Delete</button>
{{/each}}
</script>
JavaScript
App = Ember.Application.create();
App.Store = DS.Store.extend({
revision: 11,
adapter: DS.RESTAdapter.extend({
serializer: DS.RESTSerializer.extend({
init: function() {
this._super();
this.map('App.Post', {
author: { embedded: 'load' },
comments: { embedded: 'load' }
});
}
}),
ajax: function(url, type, hash) {
// mock the response for getting 'post' with RESTAdapter
if (url === '/posts' && type === 'GET') {
hash.success.call(this, {
posts: [{
id: 'post',
comments: [
{ id: 'comment1', post_id: 'post' },
{ id: 'comment2', post_id: 'post' }
],
author: { id: 'user' }
}]
});
}
else {
// for any other kind of request, just print out the url
console.log('ajax: ' + type + ' ' + url);
}
}
})
});
App.DeletesDependentRelationships = Ember.Mixin.create({
// an array of relationship names to delete
dependentRelationships: null,
// set to 'delete' or 'unload' depending on whether or not you want
// to actually send the deletions to the server
deleteMethod: 'unload',
deleteRecord: function() {
var transaction = this.get('store').transaction();
transaction.add(this);
this.deleteDependentRelationships(transaction);
this._super();
},
deleteDependentRelationships: function(transaction) {
var self = this;
var klass = Ember.get(this.constructor.toString());
var fields = Ember.get(klass, 'fields');
this.get('dependentRelationships').forEach(function(name) {
var...