We are using backbone/marionette to build a large application that is split up into many independent modules. The main application manages the header, menus, notifications and footers. It also instantiates the router of each module and passes to it the central region of the app page, so that the module can render itself.
We have a router in the main app that responds to the default url by initializing and showing the menus, etc. The menu routes to a module by adding a hash tag to the url. Each module's router watches for the appropriate hash and responds by showing its contents in the region it was given by the main app.
This all works fine until the user wants to bookmark (or simply refresh) the module page. When this happens the module router correctly responds to the url with the hash on it, but the main router doesn't get invoked to reinitialize the menus and footers, so the module renders itself on the full page (without any headers/footers).
I think that the main router should fire the default route before the module router fires its event. This isn't happening.
Does anyone have any idea how I should implement this? TIA.
This may be of some help/inspiration:
Backbone.Marionette Change Region when Route changes
Basically, bind a handler to Backbone/Marionette's route change event, and update menus from that handler.
Related
I have the following case: I have a web page with antd tabs and I need to refresh each of these tabs separately in a service worker push event. When I use client.navigate() or client.openWindow() in the event listener the whole page is refreshed. I have found a solution with React Router to pass parameters in the url, but I don't like it because I don't want the url to change and also I need to pass further props to the page that are shared in both tabs. Also how can I manage to call a Route render or a component with props from the service worker file. I use React, Typescript and antd.
The structure is the following:
Main.tsx - page with Router Routes
service-worker.ts - service worker methods and functions
SomePage.tsx - page I need to refresh
Other pages components etc.
Solved...
After a little exploring I have used client.postMessage in the service worker and on the resulting page I used navigator.serviceWorker.addEventListener('message', (ev)) where I could get the data from the service worker and use it in my component for what I needed and more.
I am trying to prevent the situation where code is injected multiple times when revisiting a previously viewed Route.
In a conventional site, the page is reloaded, and thus all the tags and their content need to be downloaded again, but in React, using react-router-dom, the history is changed without a page refresh. This leaves the previously injected code on the page.
I'm trying to gauge if the logic for restricting when a tags content should be injected into the React app belongs in:
GTM Trigger
GTM Tag
I cannot find any documentation for achieving this in triggers (as tag firing options->once per page doesn't work in this case), but achieving it in the tag code could be as simple as checking for the existence of an id wrapping the tag code, and preventing injection if it is already present.
Any suggestions?
I need to reload my page when I render certain component using react router. I need this because I need a JavaScript script to load again and detect a certain form tag with a particular id. If I don't reload the page, the script never detects the form's id. (This script makes some validation on the form).
If I go to the contact component from my home component (root) the script doesn't work (I can send the form with empty fields). But if I go to the contact component from home, and I reload the page, the script starts working.
This is the error I get when home is rendered and the script doesn't detect the form id:
form-submission-handler.js:162 Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument.loaded (form-submission-handler.js:162)
And this is what is used to detect the id:
function loaded() {
console.log('contact form submission handler loaded successfully');
// bind to the submit event of our form
var form = document.getElementById('gform');
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
So, if I reload the page, form-submission-handler script can detect the form.
Here is a page where you can replicate what is happening. Just go to "Contacto" section, it's in the Navbar.
The form submission handler script is inside a script tag before the tag in my index.html file, where the app is rendered.
It is possible to reload page with react and react router. To reload, you would simply provide anchor link to the url with contacts, and when user clicks on that anchor, page with that url would be fetched again from the server (you do have to make sure that your server would respond to that url and return your react app)
However, people generally go to the lengths to prevent react apps from reloading, since on reload all state of your react app is lost. Also I can not think of any situation in which I actually needed to reload react app, especially not for something as ordinary as form validation and submission. So, while your need to reload might still be justified, there is strong indication that you are trying to use react in some rather strange way, and that your problem might be resolved by getting more used to react and its usual usage patterns.
I am developing an app in NativeScript with Angular
When I want to navigate to another route I simply programmatically declare:
this.router.navigate(['/my-details']);
However, when I am on the my-details route and I want to refresh the route.
I have tried calling the route again with the same method as above, as adding a parameter to the route such as /refresh, but they both do not work.
How do I refresh/navigate to the current route?
Couldn't you just use pullToRefresh? Although you have a detail view and not a list view it is possible to implement it there: https://github.com/bradmartin/nativescript-pulltorefresh#html
I am creating component based Angular app using Angular version 1.5.5 and typescript. In the header component I have country dropdown. That header component is re-used in multiple pages. Once the country is selected from the dropdown that particular scope lies only for that page, once I navigate to other page its got lost.
Is there any better way to reuse the component based on my scenario?
Few suggestions,
You can make use of $rootScope since its globally available, keep the country in $rootScope so that once you changed the model it will be available in the other pages as well
I don't know whether its suits your situation, If you are using angular routing keep the header component outside ng-view so that it will not change will navigating through different pages.