StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POEmber.js: showing multiple database-backed resources/models in the same page/route?
text
Body
copied!<p>I'm writing a small test app using Ember, in the form of a budget manager. I have a Budget object, which contains general properties like the monthly limit and a description. I also have a set of Expense objects, which contain a name, the amount spent, etc. Both are retrieved from a server using Ember Data's REST adapter.</p> <p><strong>HTML:</strong></p> <pre><code><body> <script type="text/x-handlebars" data-template-name="budget"> <h2>{{name}} (€ {{amount}})</h2> </script> <script type="text/x-handlebars" data-template-name="expenses"> <ul id="expense-list"> {{#each model}} {{render "expense" this}} {{/each}} </ul> </script>  <script type="text/x-handlebars" id="expense"> <li> <label>{{description}}</label> <label class="subtle">{{formatDate time}}</label> <label class="amount">{{amount}}</label> </li> </script> </body> </html> </code></pre> <p><strong>JavaScript</strong>:</p> <pre><code>window.App = Ember.Application.create(); App.ApplicationAdapter = DS.RESTAdapter.extend({ host: 'http://localhost:5000', namespace: 'outthepocket/api' }); // Model App.Expense = DS.Model.extend({ amount: DS.attr('number'), description: DS.attr('string'), time: DS.attr('date') }); App.Budget = DS.Model.extend({ name: DS.attr('string'), amount: DS.attr('number') }); // Routes App.Router.map( function() { this.resource('budget'); this.resource('expenses'); }); App.ExpensesRoute = Ember.Route.extend({ model: function() { return this.store.find('expense'); } }); App.BudgetRoute = Ember.Route.extend({ model: function() { return this.store.find('budget', 1); } }); </code></pre> <p>Following the architecture I see in all the Ember tutorials, there is an ExpensesRoute with the list of expenses as its model, and a BudgetRoute with the selected budget as its model. This works great as long as I go through the proper URL to see each resource:</p> <ul> <li><strong>myapp.html#budget</strong> renders the budget template with data from the server.</li> <li><strong>myapp.html#expenses</strong> renders the expenses template with data from the server.</li> </ul> <p>The problem I'm having now is that I want to <strong>display both templates, with their data, on one page</strong> (the index page). I've tried two solutions for this:</p> <ul> <li><p><strong>Solution 1</strong>: Have separate routes and templates and call {{render budget}} and {{render expenses}} in the main application template. This renders both templates, but without any data.</p></li> <li><p><strong>Solution 2</strong>: Have just an IndexRoute and return both budget and expenses from its model property, rendering them into the index template. This more or less works, but seems counter to Ember's otherwise nice separation of different resources, routes and controllers.</p></li> </ul> <p>Any thoughts? I've been through five or six tutorials and Ember's official guide, but none of those have made clear how to assemble a one-page web app with multiple templates backed by multiple resources without having to link to different pages/routes.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload