So I working on converting a them main app.js file over to Ember 4 and native javascript. My question is how are people handling modifying things like the Route class. My current portion of codes look like this.
Route.reopen({
//breadCrumb: null
currentRouteModel: function () {
return this.modelFor(this.routeName);
}
});
I mean i guess i can rewrite the instance case of method everywhere to just do exactly what it is returning, but I wanted to see what people are doing. I also have a Component reopen on app.js that I need to fix in the migration.
the main thing I've seen folks do is one of two things:
A class decorator would look something like this (and would only work in JS, and TypeScript doesn't know how "maybe"-inheritance works with class decorators (ok, it would technically "work" in TS, but you'd get type-errors)):
// usage
@withCurrentRouteModel
export default class MyRoute extends Route {}
// implementation
function withCurrentRouteModel(OriginalRoute) {
return class extends OriginalRoute {
@service router;
get routeName() {
return this.router.currentRouteName;
}
get currentRouteModel() {
this.modelFor(this.routeName);
}
}
}
I added a usage of the RouterService
because I wasn't familiar with routeName