Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.
Related
I made a page with the same url all the time. I show my div by hiding and showing components, but no route. So, now I need the user can go back page using the back arrow of the explorer. Is there any possibility?
The back button of the browser change the window history :
https://developer.mozilla.org/fr/docs/Web/API/Window/history
So i don't think you can link the browser back btn to a javascript variable and prevent his effect on history
You can find on the net solution where people force history.forward() when back btn is pressed, you can change your variable here. But it's a bit dirty
How can I stop the browser back button using JavaScript?
So I have a really ask but the implementation is eluding me.
I want to simulate the completion of a task in the background in our product demo.
The User Journey :
Arrive at the home page
Click button on the home page -> Button goes into loading state (button replaced by loading animation)
We continue on with the demo and navigate away
We want to come back to the home page after "execution complete" .
Well how do we know if execution is complete ? Well that's where this delayed alert I'm trying to implement comes in. I'd like an alert to be sent out , regardless of what page I am on in the app after some x minutes/seconds of clicking that button.
Any ideas on how I would go about doing this ?
I am trying with redux-toolkit but so far it's only working on the page itself and
if I return to the page after navigating away.
This can be done in two ways,
elevate the state to the point which covers both home page and all the navigation pages, Use react context API to pass data and use useEffect hook to track task completion and do the need full.
Use native javascript to trigger custom event and add an event listner to it Read more about curtom events here
Although this is all just theory, I can help more after viewing the code.
would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery
I am using react-router-dom with Switch, Route, withRouter . How to implement in this scenario in React js.
Basically i used window.onbeforeunload but this is wokring on tab close but this is not my scenario. I want on browser window close not on tab close and not on Refresh clear the localStorage.
Perhaps instead of using localStorage you could use sessionStorage? This lasts for as long as the tab is open rather than the page (browser). A good link to view regarding this can be found at javascript.info and highlights the subtle differences between the two.
I have a view for which route has been defined. On the view I have a no of images and when I click any of them the Modal Dialog appears with the detail of that image. What I want to do is to change the url only when the modal appears so user can easily share them. And yes, the share url would be another route I will define so when user directly come to that one, the modal pops in. Any suggestion please?
I would not change the URL when a modal appears. A modal is an overlay of your page and actually not a new page with a new URL.
Many image hosters, however, show the URL in a read-only field under the picture so that users can copy it. Maybe this is the way you would like to go.
On the page itself I recommend using $location to determine if there is an imageId in your URL. If so, just invoke the same logic as if a user clicked on that image on the page.