I have two layouts, default and main.
The default layout is for the page view and the main layout is an empty wrapper without components.
The page with main layout is loaded as an iframe inside the page with the default layout.
When i change state inside the main layout i can listen to and get the changes whilst outside the main layout in the default layout i can't listen to and get the changes from inside the iframe/default layout.
Any idea why? Maybe because of the iframe, or because the Nuxt instance is loaded in both layouts separately?
Anyway i found the answer, the problem was that the iframe has a different state check how to sync them here https://github.com/L-Chris/vuex-iframe-sync
Related
I would like to find a solution to use the same component instance multiple times, on different pages but without creating a new instance for each render.
Each page must use the first initialized instance of the component. In few words, reuse the previously rendered component.
My goal is to display a map and draw a route on it with the current GPS position, which is updated in real time. This map is displayed on different size, on different locations / screens.
The problem is that this component must :
be displayed on several pages independently
not be rendered several times
must be initialized only once
Example:
Component A is initialized on screen 1. Then, we navigate on the screen 2, which must display Component A too. But the particularity is that we must reuse the Component A on his exact previous state like it was on the screen 1 (with the view rendered, his states etc.).
For now, the component is always rendered on each screen once (standard behavior).
I tried hooks like useContext, useMemo but I cannot make it working like I want.
I tried to instantiate Component A on the Navigator (react-navigation) and passing Component A as parameter of the views.
I've made too some attempts with library like react-native-portal but nothing relevant.
Do you guys have a brillant idea?
I am making a website using react-router v4 to navigate between views. So my layout have nav and footer, use Switch to switch different views.
I already add scrollToTop function to make it scroll to top between different views.I used the function from here https://reacttraining.com/react-router/web/guides/scroll-restoration
Let's say I have views Home and Solution. The problem is that inside the Solution view, I added another Switch ( child routes), so the path will be like this http://localhost:3000/solution/solution1.
So now when I clicked the child routes in Solution page, the page scroll to top which makes sense because the layout is wrapped by ScrollToTop function. But it is a switch tab, I don't want it to scroll to top, I want it to remain unchanged.
I tried to use ScrollToTopOnMount but no success.
Any ideas how to achieve this ? Thank in advance.
Working on a car dealership site and playing with vue router.
The issue currently is that I have a homepage with a grid of vehicle, when clicking to view one on its own page I have to wait for the random parts to load in ,which causes page height jumps etc.
Is there a way I can trigger the view to load a method but only change the route and view when I say to (api has returned a response)?
On YouTube for example, you click a link and get the progress bar before the view changes.
Thanks.
The issue with your page height jump could be resolved by this.
As for pre-loading the data, you can use the beforeRouteEnter() function, here.
I'm using YUI 3 tabview, and my page appears without tabs very briefly, and then the tabs appear. I found this page:
http://yuilibrary.com/yui/docs/widget/
Hiding Progressively Enhanced Markup
which seems relevant, but I'm not sure how it applies to tabview.
Is there a way to prevent the display of the untabbed list until the tabs are ready?
Thanks very much!
The default style of the tab container could be set to display:none; and on your tab view creation you could then remove the display:none property
You could bind to your tabview render event and set the display on that.
i have made an application where MainPage is the opening window of my application.
Then i added two pages to the project. One is portrait and other is of landscape mode.
Now there is a controller class which will be controlling the main working of the application. Now i want that when i navigate from main page to portrait or landscape page then i will able to get the object of the current opening page which i require in controller class.
Is there any work around ?
There is no way to get the details of the page that was last opened automatically. You will have to do this yourself.
There are 2 common approaches to this:
Use a global variable to store that last viewed page.
Use a messaging system to inform the MainPage which page was displayed last.