Sharing Data Between Models in Ember - ember.js

Question

I've looked through stack overflow but not found any satisfying answers. Here's my problem.
I have a very simple app that I'm creating using EmberJS just for practice. It's an expense tracking application and basically has 3 sections : 'Friends', 'Expenses' and 'Summary' as shown in the screenshot.
The 'Friends' and 'Expenses' sections are working as they should. They allow me to browse through friends that are stored and enter new ones as well. Same goes with the expenses tab.
But I'm not able to get the summary page to work. I've included the code below for each of the controllers (ie friendsController, expensesController). Please do let me know how I can access information from the expenses model and display it in the summary tab. Thanks a million!
App.FriendsController = Ember.Controller.extend({
isEditing: false,
actions: {
add_friend: function() {
this.set('isEditing',true);
},
cancel: function() {
this.set('isEditing',false);
},
addFriend: function(){
var name = this.get('name');
var scrName = this.get('screenName');
var description = this.get('description');
var newFriend = this.store.createRecord('friend', {
name: name,
screenName: scrName,
description: description
});
this.set('name','');
this.set('screenName','');
this.set('description','');
newFriend.save();
this.set('isEditing',false);
},
}
});
App.ExpensesController = Ember.Controller.extend({
isEditing: false,
actions: {
add_expense: function() {
this.set('isEditing', true);
},
cancel: function() {
this.set('isEditing',false);
},
addExpense: function(){
var date = this.get('date');
var description = this.get('description');
var whoPaid = this.get('whoPaid');
var amount = this.get('amount');
var forWhom = this.get('forWhom');
if(!date.trim()) { return; }
if(!description.trim()) { return; }
if(!whoPaid.trim()) { return; }
if(!amount.trim()) { return; }
if(!forWhom.trim()) { return; }
var newExpense = this.store.createRecord('expense', {
date: date,
description: description,
whoPaid: whoPaid,
amount: amount,
forWhom: forWhom
});
this.set('date','');
this.set('description','');
this.set('whoPaid','');
this.set('amount','');
this.set('forWhom','');
newExpense.save();
}
}
});
Application Template :
<script type="text/x-handlebars">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-12">
<h2>{{#linkTo 'index'}}Expense Tracker{{/linkTo}}</h2>
</div>
<hr>
<div class="nav well col-md-12 master">
<ul>
<li>{{#linkTo 'friends'}}Friends{{/linkTo}}</li>
<li>{{#linkTo 'expenses'}}Expenses{{/linkTo}}</li>
<li>{{#linkTo 'summary'}}Summary{{/linkTo}}</li>
</ul>
</div>
<div class="well col-md-12 detail">
{{outlet}}
</div>
</div>
</div>
</script>
Friends Template :
<script type="text/x-handlebars" id="friends">
{{#if isEditing}}
{{partial newFriend}}
<p>
<button {{action 'cancel'}} class="btn btn-success">Cancel</button>
<button {{action 'addFriend'}} class="btn btn-info">Save</button>
</p>
{{else}}
<p><button {{action 'add_friend'}} class="btn btn-primary">(+) New Friend </button></p>
{{/if}}
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Screen Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{{#each model}}
<tr>
<td>{{name}}</td>
<td>{{screenName}}</td>
<td>{{description}}</td>
<td>
<button action 'delete_friend' class="btn btn-danger">Delete</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
Friends Partial Template (to allow entering new friend) :
<script type="text/x-handlebars" id="_newFriend">
<p> Add New Friend </p>
<table class="table table-bordered">
<tr>
<td><label for="name">Name: </label></td>
<td>{{input type="text" value=name id="name"}}</td>
</tr>
<tr>
<td><label for="screenName">Screen Name: </label></td>
<td>{{input type="text" value=screenName id="screenName"}}</td>
</tr>
<tr>
<td><label for="description">Description: </label></td>
<td>{{input type="text" value=description id="description"}}</td>
</tr>
</table>
</script>
Expenses Template :
<script type="text/x-handlebars" id="expenses">
{{#if isEditing}}
{{partial newExpense}}
<p>
<button {{action 'cancel'}} class="btn btn-success">Cancel</button>
<button {{action 'addExpense' 'addSummary'}} class="btn btn-info">Save</button>
</p>
{{else}}
<p><button {{action 'add_expense'}} class="btn btn-primary">(+) New Expense </button></p>
{{/if}}
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Who paid?</th>
<th>Amount</th>
<th>For whom?</th>
</tr>
</thead>
<tbody>
{{#each model}}
<tr>
<td>{{date}}</td>
<td>{{description}}</td>
<td>{{whoPaid}}</td>
<td>{{amount}}</td>
<td>{{forWhom}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
Expenses partial template (to allow new expense) :
<script type="text/x-handlebars" id="_newExpense">
<p> Add New Expense </p>
<table class="table table-bordered">
<tr>
<td><label for="date">Date: </label></td>
<td>{{input type="date" value=date id="date"}}</td>
</tr>
<tr>
<td><label for="description">Description: </label></td>
<td>{{input type="text" value=description id="description"}}</td>
</tr>
<tr>
<td><label for="whoPaid">Who Paid: </label></td>
<td>{{input type="text" value=whoPaid}}</td>
</td>
</tr>
<tr>
<td><label for="amount">Amount: </label></td>
<td>{{input type="text" value=amount id="amount"}}</td>
</tr>
<tr>
<td><label for="forwhom">For Whom: </label></td>
<td>{{input type="text" value=forWhom id="forwhom"}}</td>
</tr>
</table>
</script>
Summary Template :
<script type="text/x-handlebars" id="summary">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Total Expenses</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{name}}</td>
<td>{{totalExpenses}}</td>
</tr>
</tbody>
</table>
</script>

Answer 1

In the route model method you can query for models from others routes, like:
App.SummaryRoute = Ember.Route.extend({
model: function() {
return this.store.find('friends');
}
});
So inside of summary controller you can access the friends using this.get('model')
If you need to return more than one promise, you need to use Ember.RSVP.hash:
App.SummaryRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
friends: this.store.find('friend'),
expenses: this.store.find('expense'),
}).then(function(data) {
var friends = data.friends,
expenses = data.expenses;
// calculate the totalExpenses ...
// Fixed for simplicity
return { name: 'foo', totalExpenses: 12 }
});
}
});
So inside of summary controller you can access the friends using this.get('model.friends') and expenses with this.get('model.expenses').
If you have a router structure where your subroute needs to access the model from a parent route, like:
App.Router.map(function() {
this.resource('parent', function() {
this.route('child');
});
});
In the child route you will be able to use modelFor('parent') because the parent route already have your model resolved, for example:
App.ChildRoute = Ember.Route.extend({
model: function() {
return this.modelFor('parent')
}
})