I’m building an app which as routes that have a model that is dependent on a model from another route. The app displays a list of vehicles and data regarding alerts for those vehicles. The data comes from an API. The problem is that the list of vehicles is a different API from the alerts for those vehicles. So what I need to do is make the call to the vehicles API and using a vehicle ID from that call get the alert data from a different API.
I’m loading the vehicle list on the application route since it’s used on multiple pages. I then have a route for “alerts”.
Here are my routes. The “vehicle” route is a dashboard that displays data from many APIs.
this.resource('vehicle', {
path: '/dashboard'
// path: ':vehicle_vehicleId/dashboard'
}, function() {
this.resource('alerts', {
path: 'notifications'
}, function() {
this.resource('alert', {
path: ':alert_id'
});
});
this.resource('reminders', {
path: 'reminders'
}, function() {
this.route('new');
this.resource('reminder', {
path: ':reminder_id'
});
});
});
So to sum it all up here is the workflow.
- The “alerts” route is loaded.
- Application route makes call to /vehicles API.
- Once the /vehicles call finishes. I need to get the vehicleId property and pass that along to the /alerts API.
- This all needs to be loaded into the Alerts Controller so that the template can display the data.
I hope this all makes sense