backbone routes, creating a faux route? - javascript

I not sure if I have used the technical term, or so I will describe what I am wanting to do with my backbone routes. In my application a user logs into a dashboard and they can see all the activity that is related to them, clicking on an activity link create modal for them to edit that activity.
On landing in the dashboard the URL is http://app.dev/#dashboard on clicking a link I want the modal to overlay the dashboard, but for the URL to change to http://app.dev/#activity/edit/:id without losing the activity view that should site behind model, currently the app navigations to edit route and re-renders everything, is there another way to preserve a view but change the URL?

You need to create a subview which will render the edit view (or just create an overlay popup).
Either way, you cannot do this using a <a href> tag, but you will need to do this via javascript.
Backbone.js has a way for you to easily navigate through routes using:
router.navigate(fragment, options) - see Backbone Navigate
Using {trigger:true} you can call the router function (which is basically what happens now) and that will re-render the view using the router function (as if the user landed on that page). By default, and if you pass {trigger:false}, Backbone will only change your url, but will not trigger the router function, so it will be transparent to the user, besides the fact that will see the url change, and he can see the change in his history (if you used Backbone.history.start())
Bottom line: To just change the url, without going through router, call router.navigate(requestedUrl, { trigger: false}) and don't forget to actually show him the new view (popup, overlay, nested view, etc...)

Related

How to reload a component on routing back to it with no change in route parameter?

I have a unit component which loads with a router url "unit/:unitName". With respect to change in unit name, same component is rendered with different content.
I also a have a button in this component on clicking which, a routable modal which opens with URL "unit/:unitName/openPopup".
Now, On closing the modal, I am routing back to "unit/:unitName". What I want is my unit component to reload on closing of the popup, which I am not able to achieve.
I tried using routerReuseStategy.shouldReuseRoute = true/false at different place but it doesnt seem to work.
I want to use this reload functionality only for this component in my entire application. I do not want to modify the app routing as well.
What should I do to just reload the unit component on closing the modal?

Ionic-1 Navigation

I am working on an Ionic-1 App. I am terrible confused in managing the back history of my app. Consider this scenario:
Start from home page then
Does a 3 step user registration process
After the end of user registration redirect to records page
Now clicking back button (hard or soft back) I want to navigate back to home instead of cycling through user registration process. There are other scenarios like this where back behavior needs to be modified. Are there any references around to implement back behavior systematically? Should I manually define view hierarchy tree structure and somehow figure out where in tree current view is and then go to parent?
As per my suggestion you should pass parameter say 'extraparams' in your url and set it value to 'home'.And on record page controller then make a function on back button say 'goBack()' where you can check if value of 'extraparams' is 'home' and then use $state.go() to navigate to home view.
If you can keep and maintain each and every section using state approach then you can redirect to home page or what ever the page you prefer to redirect to.In that way you have to implement back button like this way, $state.go('homeSate');
or if you can keep 3 steps(registration) as sub states and have try by injecting $rootScope to your controller in which allows you to access your parent(home).

JS main app which uses routing to show dialogs and such?

I'm wondering if I can have a JavaScript-based application which has a main "template" as a background/main app of some sorts mixed with some URL routing to show dialogs and such? say, here's a short example:
Main app displays google map and whatnot. URL: /#
User clicks some menu item and it displays an options dialog. URL: /#options
User goes to a sub-options menu. URL: /#options/advanced
User closes the main option dialog, back to main app. URL: /#
User puts some coordinates in URL and the map locates it. URL:/#coords/100/100
The main idea here is to keep the map visible (and other stuff that I want to show in that template, too) in the background while using the URL to either display dialogs, forms or even to control the google map itself - BUT that if the user goes to, for example, /#options on first load, the app should load everything and then show the options dialog, okay?
Basically, I'd like to have a "main state" page which contains the most important part of my app, but I'd like to use url-routing for displaying dialogs and executing actions, that users can bookmark in the future and share and so on. I dunno how is this idea/concept called, so that's why I'm asking.
Also, what can I use to archieve something like this? I know this is kind of an open question, but I'm aiming for a JavaScript-based app/framework (TypeScript works too). I don't know if Angular2 + ui-router can do this, or even how should I google this?...
If Angular2+ui-router can do it, then great! but how?. If there are any other frameworks or combinations please provide an example! I've read about vue.js, react.js and so on, but vue.js seemed too simple and react.js still makes me feel uneasy mixing HTML inside the JS files, it just feels unnatural. Thanks in advance for any pointers you can provide! :)
Angular 2 can accomplish this. One way would be to have just one component. This component shows your map.
Your logic can watch for changes to the URI parameters and show/hide options accordingly. Since these parameters are not always present, you would use optional parameters.
While your app is running, you can add event listeners to buttons and links that should change the view state. When the user clicks a Select City button, the event listener could direct him to a URI with the appropriate parameter: ;view=dialog;target=city (Angular 2 uses matrix uri notation by default)
The component would be listening for changes in the parameters and react accordingly.
ngOnInit() {
this.route.params.forEach((params: Params) => {
// this is executed every time new URI parameters arrive
this.viewType = params['view'];
this.target = params['target'];
//todo: update the model to match new parameters
});
}

Complex routing with Backbone & Backbone.Marionette

I'm working on a google maps app for some time now. The app is using Backbone & Backbone.Marionette. A screenshot of what it looks like can be found here:
https://www.facebook.com/photo.php?fbid=566101353505241&set=a.516037321844978.1073741832.145077908940923&type=3&theater
For the last couple of hours I've trying to find advanced examples of using Backbone Router to keep the app state, but I couldn't find anything more advanced than examples with single route parameters: #about #notes etc...
Here is what I'm trying to do.
When the user moves around on the map, I change the url to reflect this:
/:lat/:lng/:zoom
When the user selects any marker from the list on the right, then I change the url to:
/:lat/:lng/:zoom/hotspot/:id
The list on the right is using Backbone.Paginator. So when the user clicks on any page the url will change to:
/:lat/:lng/:zoom/page/:id
now if the user clicks on a hotspot I want to change the url to:
/:lat/:lng/:zoom/page/:id/hotspot/:id
If for example the user used the directions functionality in the app I want the url to reflect this:
/:lat/:lng/:zoom/direction/:start/:end
If he uses the list with hotspots before or after he used the directions app I want to change the url to:
/:lat/:lng/:zoom/direction/:start/:end/page/:id/hotspot/:id
You get the idea. I want to make it possible for the user to use any part of the app and share the link with anyone after that.
As I said I'm using Backbone.Marionette - so my application has a lot of sub apps responsible for the map view, list view, directions view etc.
My problems are as follow:
How to use backbone.navigate properly? When the user moves around on the map - I can easily change the /:lat/:lng/:zoom . But now if the user clicks on any hotspot and I just pass backbone.navigate('hotspot/200') -> the url will change to just #hotspot/200 and the part with the lat/lng/zoom will be lost. Same goes for any other url I listed above. If I just pass the part that needs to be added to the url, backbone will clear the whole hash and add my new part. How do you deal with that? Do you have a global function that keeps track of all possible url combinations and just adds or replace depending on the current situation?
If we take this url for example:
/:lat/:lng/:zoom/direction/:start/:end/page/:id/hotspot/:id
/:lat/:lng/:zoom - this part is needed by the map app
direction/:start/:end - this part is needed by the directions app
page/:id - this part is needed by the hotspots app
hotspot/:id - this part is needed by the hotspot app
How do you manage such urls? I would basically need to call the above apps one after the other in order to recreate the app state.
Is there any way to do all this without going mad? Any examples of advanced Backbone Router (or even just HTML5-history) usage or tips are welcome!
I'd create a navigate(newState) type function which checks the current state of the app (ie. the URL). Using the current URL you can generate the next URL as per all of your conditions by simply adding the new state to the current state or by replacing parts of the current state where appropriate. Once that's done, call Backbone.navigate with your new URL.

Intercept EmberJs Routing events

Where can I intercept routing events from the EmberJs router?
When the browser hits a subroute like
https://server/posts/5/comments
I want to intercept the events and actions and inject custom or trigger custom logic instead of redering stuff to an outlet...
Is there a hook?
EDIT:#sabithpocker ist right maybe I should give more detail about what I am trying to do...
Actually I want to have a list of posts (resource posts) so far so good.
Now I want to show a comments view inline of a certain post with a link-to helper. So if someone clicks on posts/5/comments I want to highjack routing and send a message to show the dialog on the posts with the id 5 (inline).

Categories