Skip to content

Instantly share code, notes, and snippets.

@sararob
Created September 28, 2014 21:07
Show Gist options
  • Save sararob/26e0a80b1fb5d1aad9d5 to your computer and use it in GitHub Desktop.
Save sararob/26e0a80b1fb5d1aad9d5 to your computer and use it in GitHub Desktop.
Example of implementing a hasMany / belongsTo relationship in EmberFire
var App = Ember.Application.create({});
var Promise = Ember.RSVP.Promise;
// ADAPTER
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase("https://<your-firebase-name>.firebaseio.com/")
});
// MODELS
App.Bar = DS.Model.extend({
name: DS.attr('string'),
city: DS.attr('string'),
deals: DS.hasMany('deal', { async: true })
});
App.Deal = DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string')
});
// ROUTES
App.Router.map(function() {
this.resource('bars', { path: '/bars' }, function() {
this.route('new');
});
this.resource('bar', { path: '/bar/:bar_id'});
});
App.BarsIndexRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('bar');
}
});
App.BarRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('bar', params.bar_id);
}
});
// CONTROLLERS
App.BarsNewController = Ember.ObjectController.extend({
init: function() {
this.set('bar', Ember.Object.create());
},
actions: {
addBar: function() {
var newBar = this.store.createRecord('bar', {
name: this.get('bar.name'),
city: this.get('bar.city')
});
newBar.save();
this.setProperties({
'bar.name':'',
'bar.city':''
});
this.transitionToRoute('bars');
}
}
});
App.BarController = Ember.ObjectController.extend({
actions: {
addDeal: function(bar, deal) {
deal.save().then(function() {
Promise.cast(bar.get('deals')).then(function(deals) {
deals.addObject(deal);
bar.save().then(function() {}, function() {});
});
});
}
}
});
// COMPONENTS
App.FireBarComponent = Ember.Component.extend({
actions: {
addDeal: function() {
var store = this.get('targetObject.store');
var deal = store.createRecord('deal', {
title: this.get('dealTitle'),
description: this.get('dealDescription')
});
this.sendAction('onAddDeal', this.get('bar'), deal);
this.setProperties({
dealTitle: '',
dealDescription: ''
});
}
}
});
<script type="text/x-handlebars" data-template-name="bars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="bars/index">
{{#each bar in arrangedContent}}
{{#link-to 'bar' bar.id}}{{bar.name}}{{/link-to}}<br/>
{{/each}}
{{#link-to 'bars.new'}}Add a new bar{{/link-to}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="bars/new">
Add a new bar:
{{input value=bar.name}}
{{input value=bar.city}}
<button {{action "addBar"}}>Add</button>
</script>
<script type="text/x-handlebars" data-template-name="components/fire-bar">
{{bar.name}}<br/>
{{bar.city}}<br/><br/>
{{#each deal in bar.deals}}
{{deal.title}}<br/>
{{deal.description}}<br/><br/>
{{/each}}
Add a deal:<br/>
{{input value=dealTitle}}<br/>
{{textarea value=dealDescription}}<br/>
<button {{action "addDeal"}}>Add Deal</button>
</script>
<script type="text/x-handlebars" data-template-name="bar">
{{fire-bar bar=model onAddDeal="addDeal"}}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment