Hi All
I am building a small demo application that has nested resource views. For example:
#!accounts - takes you to a view with a list of accounts on the left
#!accounts/2 - takes you to a view with the same list on the left, plus the account details on the right
#!accounts/2/transactions - takes you to a view with the account list, the details on the right and the transactions for that account just below
Here is a wip example: https://github.com/sporto/ember-vs-can/tree/master/can
The particular part I need help is on how to best do the routing and nested views. This is some partial code I have:
```js
APP.MainControl = can.Control({
init: function (ele, options) {
var view = can.view('t-main', {});
ele.append(view);
can.route.ready();
},
'accounts route': 'showAccounts',
'accounts/:id route': 'showAccount',
showAccounts: function (data) {
console.log('showAccounts');
$el = $('<div>');
$('.app-outlet', this.element).html($el);
this.accountsControl = new APP.AccountsControl($el, {});
},
showAccount: function (data) {
var id = data.id;
var self = this;
this.requireAccounts(function () {
self.accountsControl.showAccount(id);
});
},
requireAccounts: function (cb) {
if (this.accountsControl == null) {
this.showAccounts();
}
cb();
}
});
```
So I have a control that listens for all routes, when we hit a route like accounts/:id I am instantiating both the 'accounts' control and the 'acccount' control. So the particular problem I want to resolve is how to elegantly instantiate nested views when you use nested routes, hope it makes sense.
Any hints / examples on how to do this best will be great, thanks.