Currently, I am in the process of creating a test application using Ember.js to build a budget management tool. The structure includes a Budget object which holds properties such as the monthly limit and a brief description. Additionally, there are Expense objects containing details like name, spent amount, etc. Both sets of data are fetched from a server utilizing Ember Data's REST adapter.
HTML:
<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>
<!-- expense template -->
<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>
JavaScript:
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);
}
});
In line with the standard Ember tutorials, I have an ExpensesRoute providing the list of expenses as its model and a BudgetRoute supplying the chosen budget as its model. This setup functions smoothly when I access each resource through their respective URL paths:
- myapp.html#budget displays the budget template with relevant server data.
- myapp.html#expenses showcases the expenses template alongside corresponding server data.
The challenge arises when I attempt to show both templates, along with their data, on a single page (the index page). I experimented with two solutions so far:
Solution 1: Employ separate routes and templates then use {{render budget}} and {{render expenses}} within the main application template. Although this method renders both templates, it does so without any associated data.
Solution 2: Opt for just an IndexRoute and retrieve both budget and expenses data in its model property, displaying them within the index template. This approach works to some extent, but goes against Ember's usual practice of handling various resources, routes, and controllers separately.
Any insights or suggestions? Despite reviewing several tutorials and Ember's official documentation, I haven't found a clear explanation on how to construct a one-page web app featuring multiple templates linked to distinct resources without the need for navigating to different pages or routes.