mardi 10 février 2015

ember routing - pass param to child route where param will serve as filter param in store retrieval

I have a scenario where there are "jobaids" - jobaids belong to "businessunits", "systemapplications", and "courses" & finally "businessunits" have many of all of the above.


When entering the project you start on the "businessunits" route (#/businessunits), where they are listed as "#link-to"s they link to a show view and when clicked move you to #/businessunits/:businessunits_id


When you arrive on this template there is a an option to view the current "Businessunit"s related "Jobaids" by "systemapplication", "course" or just "show all"


Since the easiest place to start in consideration of the model relationships (and because I'm new with ember), is the "show all" option, and that's where I've started.


So - what I need to do is get the :businessunit_id in...


#/businessunit/:businessunit_id


to be seen by the processing in the


#businessunit/:businessunit_id/jobaids


...to be able to apply to that route, a model consisting of something like this.store.find('jobaid', {businessunit_id: ID-FROM-PARENT-ROUTE})


so far I have...


/app/router.js





import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
location: config.locationType
});

Router.map(function() {
this.resource("businessunits", function() {
this.route("show", { path: ":businessunit_id" }, function(){
this.resource("jobaids", function() {});
});
});
});

export default Router;



...and the "show all" link leading to the route where I need the value of the parent id is an actual anchor tag with an {{action "getJobaids"}} which is handled with the show in the /app/routes/businessunits.js route





import Ember from 'ember';

export default Ember.Route.extend({
model: function(){
return this.store.find('businessunit');
},
actions: {
getJobaids: function(){
var url = location.href.split('/');
window.unitClicked = url[url.length-1];

this.transitionTo('jobaids');
}
}
});



then when you get to /app/routes/jobaids.js we're getting the needed id from the window...





import Ember from 'ember';

export default Ember.Route.extend({
model: function(){
return this.store.find('jobaid', {businessunit_id: unitClicked});
}
});



this is TERRIBLE but this works enough to get me to the next route (where there are some other problems I have yet to figure out relating to querying the fixture and or adapter) - HOWEVER this is NOT a desirable fix and will never keep state, basically eventually resulting in missing (necessary) variables when linking back


#/businessunits/undefined/jobaids


which as you can imagine breaks everything - so how do I do this in the genuine ember fashion without depending on a hacky use of bare bones js?





Aucun commentaire:

Enregistrer un commentaire