Reusing view model for different routes

Hi!

I have two routes with different views but the same view model. How can I specify what view the route should use?

For example, I have route /person and /user. The both use the same view model because the data is identical. But the presentation (view) should be different.

I’ve tried passing parameters in the route and then setting the view in getViewStrategy(), but there seems to be no way of getting any info from the router.currentInstruction in time before getViewStrategy() is called.

created() is the lifecycle hook where the router.currentInstruction is updated, but getViewStrategy() is run before that, so I can’t get any info from the route before it’s too late.

I can’t use the <compose> without an ugly workaround, which would require some sort of a middle view. So I prefer doing it as non-ugly as possible.

Is there a way to specify the view for a route the same way you can specify the view model?

Seems like a good candidate for <compose>. Out of curiosity what do you mean by “without an ugly workaround, which would require some sort of a middle view?”

It feels like I would need a separate view that contains the <compose> element that in turn references the real view. Or is this one of the moments I should use InlineViewStrategy instead?

Instead of fighting router with 2 views on same view model, you can feed router what it wants: 2 view models without code duplication.

export class Person extends User {}

Can be tricky with decorators. There were some issues with this kind of inheritance.
Can you confirm that you used it and everything was ok?

Yes, I am using it both on route module and normal module. At least @inject and @bindable (irrelevant in route module) works out of the box. Not tested with @autoInject, since I don’t use TypeScript.

1 Like

Interesting. I remember in the “Intermediate Aurelia Development” held by Rob on Vimeo, he said “don’t use inheritance for this sort of thing.”.

However if this works, I’m happy to go with it for the time being.

I’ll try it out and update here later.

Thx!

1 Like

Well, I didn’t see the course. Maybe I should pay for it, in order to find out some of my bad practice :grimacing:

1 Like

It’s really good! Only found two things that are outdated:

All the aurelia UI stuff has been renamed to ux, instead fo ai, like ux-dialog instead of ai-dialog. And the chain method to showDialog() is now whenClosed(), not then().

I highly recommend Rob’s Beginning and Intermediate courses on Vimeo! Well worth the price of admission.