Angularjs, IONIC; Hide DOM element on state changed instead of removing it - javascript

The default behavior or angularjs/ionic is to remove the DOM element when the route changed/left the page and replace it with the new DOM elm/run the controller again if you navigate back to the previous page.
Is there a way to hide the DOM elm associated to the route instead of removing it completely?
My use case is: my IONIC app landing page/index takes some time to compute/render and when the user navigate to detailed view and come back to the index page it build it again from scratch, because the DOM was removed and it needs to build again, which is a waist of time so rather than removing the DOM elm when the route changed hide it instead and if the user come back to the previous route, show it. this will definitely improve the app performance.
Looking forward to your response.
Thanks in advance
Abod

Use tabs in your project: http://ionicframework.com/docs/api/directive/ionNavView/
There is a lot of stuff to understand but this feature works great.
Basicly it allows you to change view without removing DOM (it stores it in memory). When you come back to previous DOM it's just loaded from memory.

Related

How does Vue.js render page happens?

It really scares me that I might want to know this thing so much. That's the whole essence of SPA (Single-Page Application). I am curious about Vue.js rendering pages. I will list some of my knowledge and If I'm wrong, please correct me. Things I think I know:
There's a which might be a tree-structure parsed from html.
Then, DOM RENDER TREE IS constructoted from css and that DOM-TREE
After that, rendering page means data is shown on the screen.
What about Vue.js? I know it has virtual DOM. If I change something with Javascript in Vue.js, the real change happens in virtual DOM because it's faster and then syncing with the real template happens. If all that is right(if wrong, please tell me) then my question is the following:
When I use Vue Router and click some link to change the page, When new page gets shown, beforeMount() is called, then if i click back button to go the previous page, beforeMount() is called also. When using Vue Router and back button, does page rendering happens again or it's saved somewhere and to make it faster, it gets all the html from cache? So If I go to some page, then click back or Vue Router link, and page rendering starts from scratch, why would it be fast?
In my opinion, page rendering happens when there's some data changed or it's the first time I am accessing that specific URL. For the second time accessing, if data has not changed, it doesn't render the page from scratch. What do you think ? Thank you.

Force Framework7 to Not Remove DOM Elements of Previous Pages

It seems that Framework7 remove DOM elements of previous pages and only keep the previous one. This is problematic since the state is loss as not all interactions are stored in the backend. For example:
Page A > Page B ---> Nothing is removed
Page B > Page C ---> Page A is removed
Then when user click back twice, Page A only shows up only if Page A was fully loaded before addView() function is called. If Page A is loaded afterwards, user will not be taken back to Page A.
Is there any suggestion on how to solve this issue? I looked at the API document and didn't see any option to make sure this doesn't happen.
Update
I managed to get it to go back to Page A by making sure div[data-page] exists before the view is loaded. However, it completely lost the state when returns back to Page A, which is completely useless. Without being able to disable this behavior, I will have a lot of extra code to store every interactions taken by user whether it's done in UI or backend. Let me know if you have any suggestions.
Update 2
I also reported the issue on GitHub. The framework should cache final state of the page rather than original state.
https://github.com/framework7io/Framework7/issues/1985

Stop ng-view from deleting old content on route change

In my current app there are quite some complex calculations to do after $routeChangeSuccess before the new page is really fully shown. This causes a bit of "flickering" as the content changes position and size. I'm already preloading the needed JSON and images before the route changes (via resolve in the $routeProvider).
My idea to prevent this is to stop ngView from deleting the old content before the new one gets inserted. Instead I want to insert the new content with display:none set, so the newly compiled directives can execute their linking procedures while the old route content is still showing. After this is all finished, the old content would be deleted and the new content would be displayed which would happen instantly with no flickering.
Is there a way to do this? I didn't find any option in the docs or in google where you could define such a behaviour. The only option I see now is a custom build of ngRoute where I change the ngViewFactory to my needs. But I don't really like that idea as this will be stressful when I want to upgrade my angular version etc. Maybe there's a better way?

Iron Router hook on a route before actually changing the template

i am trying to show the user a payment popup as soon as he clicks on a payed object.
But after he pays he should directly enter the content he clicked on.
Therefore i think its a good solution to solve this with the router, because i want every link on the page that redirects to this content to show this popup.
My problem is i want to show the popup before redirecting the user.
So i tryed the onBeforeAction hook and stuff but everything working with the iron router seems to only hook in after the URL of the browser changed and the current template was unloaded.
Do you have an idea how to get this kind of behavior?
Cheers
Based on this answer, here is how you can hook the router using Router.onStop():
// onStop hook is executed whenever we LEAVE a route
Router.onStop(function(){
//check if the current route is the page from where you need to show your
//popup and show it based on, for instance, a session variable containing
//the previously clicked content id.
});
It's a common use case that I don't think is directly achievable within the iron router framework at present (although I would be delighted to be corrected!). As you've discovered, onBeforeAction is run before the page has rendered but after the new route has been run, so the old page has already disappeared.
Effectively, you're looking to queue the running of a new route until a certain action has been completed. The use case for which I've experienced this requirement is page transitions, for which the best solution appears to be to do completely the opposite of what you propose: i.e. to add the logic to an event attached to the link, and only redirect to the new route once that logic has been satisfactorily completed (i.e. the popup has been closed in your case).
I agree that doing something in the router would be a sensible way to approach this, but I'm not sure it's possible in iron router as things stand. Note that this has already been raised though!
Will this workshop?
'unload - runs just once when you leave the route for a new route.'
From
https://github.com/EventedMind/iron-router/blob/devel/DOCS.md#unload-hook

Change the URL without triggering a DOM update

How can I change the URL in ember without triggering a DOM update.
IE something like
window.location.hash = '/items/20';
However without triggering Embers routing system and the resulting DOM changes.
Note I'm currently using the hashlocation but intend to switch to history location
Background reading
http://emberjs.com/api/classes/Ember.Location.html
http://emberjs.com/api/classes/Ember.HashLocation.html
Why I want to do this in the first place (Item modal interface)
Well this took a lot of digging through the source, but here goes:
EmberApp.Router.router.updateURL('/item/10')

Categories

Resources