Can we have a state base routing in Aurelia JS like angular ui router
Currently I have routes like this
root/<userid>/<feature>.
Now I am just trying to implement the same in following way
root/<userid> and feature should be pass as a parameter.The problem is that
Once the component is loaded in memory it is not getting updated on params change.
TIA
You need to configure the lifecycle to be invoked any time the URL parameters change.
See "Reusing an Existing VM" at the link below.
http://aurelia.io/hub#/doc/article/aurelia/framework/latest/cheat-sheet/7
"Since the VM's navigation life-cycle is called only once you may have problems recognizing that the user switched the route from Product A to Product B (see below). To work around this issue implement the method determineActivationStrategy in your VM and return hints for the router about what you'd like to happen."
In your view model write the following method:
determineActivationStrategy {
return activationStrategy.invokeLifecycle;
}
Related
I have a custom component to display the images as tile in my UI.
I am getting the response as follows for the created custom component from the backend.
components: "Test1Component Test2Component Test3Component Test4Component Test5Component Test6Component Test7Component Test8Component"
container: "false"
modifiedtime: "2020-09-29T20:52:40.454+05:30"
name: "Tiles Component"
typeCode: "TileCollectionComponent"
uid: "TilesCollectionComponent"
uuid: "eyJpdGVtSWQiOiJUaWxlc0NvbGxlY3Rpb25Db21wb25lbnQiLCJjYXRhbG9nSWQiOiJhbHNheWVyLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJPbmxpbmUifQ=="
How can I retrieve the data and show it in the UI.
The component data indicates that this component is a so-called container component. Container components do only response the component UIDs. This is a bit unfortunate, as you'd need to interact with the cms service in Spartacus to resolve the component types. before you can start rendering them.
We do have an example in our code base that you can use to render these nested components. You see in https://github.com/SAP/spartacus/blob/532603fbcfcf7c21c3abbf4e342fcda03652b61e/projects/storefrontlib/src/cms-components/content/banner-carousel/banner-carousel.component.ts#L25 that we're taken the component data and switchMap this to an array of CmsComponentData. (using cmsService.getComponentData). Spartacus will merge the different parallel requests in the loop automatically to a single backend for the component data.
You can use the CmsComponentData array in an ngFor loop, and leverage the cxComponentWrapper to iterate over all the CmsComponentData objects. The cxComponentWrapper will map to the right component and adds other stuff like smartedit integration.
<ng-container [cxComponentWrapper]="component"></ng-container>
Although this is all available, your question make me think to build a more easy solution that does the heavy lifting.
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
I'm new to express and often see the code like this:
app.once('mount',function onmount(parent){
parent._router.stack.pop();
});
Not sure what is _router and why they pop it? Any reasons behind it?
The mount event occurs when a sub-app is registered with a parent app. The parent argument is the parent app object.
parent._router is the router associated with that parent app object.
parent._router.stack is the array of routes registered with that route.
parent._router.stack.pop() is removing the last registered route from that router.
There isn't enough context here for us to know why that last route is being removed. It's possible they are trying to remove the 404 error route (just a guess).
FYI, this direct manipulation of private instance variables is not documented behavior.
If the destination is the same as the current route and only params are changing
going from one profile to another /users/1 -> /users/2.
How can I recognize this and update the component?
I'm not sure its the same for next.js but in due router even if the parameter changes the same component is reused. So you need to specifically watch the param changes.
From Vue router Documentation:
One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
Take a look here: https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes
Hi there I have asked this on Gitter, but hope that someone here may be able to help.
I have two different routes that have the same moduleId. I have also set up a setting object within the routes with some data to differentiate what gets rendered. Everything works fine when I navigate to one of these routes from somewhere else, but if I navigate from one to the other neither the constructor or the activate are fired. am i missing something??
I had this problem and it took me a while to find a solution - this should help you I hope;
You need to add the determineActivationStrategy() method into your class, and then return as below.
import {activationStrategy} from "aurelia-router";
export class ExampleViewModel {
determineActivationStrategy() {
return activationStrategy.replace;
}
}
This will force the VM to be replaced when you're routing to it from itself.
Here's some more info on the different Activation Strategy types;
activationStrategy.no-change – reuse instance with no lifecycle events
activationStrategy.invokeLifecycle – call lifecycle methods on the ViewModel instance each time the route switches
activationStrategy.replace – construct new instance of ViewModel and invoke full lifecycle on it
Taken from here ZombieCodeKill - Aurelia Routing Beyond the Basics
Found the answer here :) Although not a complete fix out of the box, the implementation is possible