Ember.js history not working after transitionTo - javascript

please see this functioning JSBin: http://jsbin.com/acUm/20
Here is the behavior I am working on. If I type 'Monroe' to filter the list down and then hit the browser back button, I expect Ember to process the route and fire the request for all patients. Instead it appears to do nothing. This is especially confounding since the back button seems to work in other areas.
Perhaps I have set up this transition improperly? Or is this an Ember.js bug?

When you transition to a route, it's a good idea to use the childest route in the hierarchy.
In your case you have this:
this.resource('patients', { path: '/' }, function() {
// this is created for you
// this.route('index');
this.route('filtered', { path: '/filtered/:last_name' });
});
By default is created a route index for that resource, so you have the patients.index.
But your transition goes to patients and it isn't the childest.
So to correct this, I have changed your sample to use PatientsIndex[Controller,Router etc], instead of Patients[Controller,Router etc].
Working demo http://jsbin.com/acUm/24/edit

Related

Vue $route.push not working when called from method

I'm building a search bar for my app with vue-bootstrap-typeahead autocomplete lib, if your not familiar with it, when you click a suggested result it triggers the #hit event, passing the result data to the method.
<vue-bootstrap-typeahead
...
#hit="goToResult"
...
/>
Then I have the goToResult method
methods: {
goToResult(result) {
this.$router.push({name: 'market', params: {marketId: result.id}});
},
...
}
When I do search from a non-market route it works fine, redirecting the user to the desired /market/:marketId route, but when it's done from a "market" route it just changes the URL but doesn't redirects to the new market, it even triggers the "duplicated route" error if I click the same result twice, but still not redirecting.
Any suggestion?
Thanks
Check out the note at the bottom of the router.push section: https://router.vuejs.org/guide/essentials/navigation.html
Note: If the destination is the same as the current route and only params are changing (e.g. going from one profile to another /users/1 -> /users/2), you will have to use beforeRouteUpdate to react to changes (e.g. fetching the user information).
...and here is how to use beforeRouteUpdate:
https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
Hope this helps!

How to router.navigate to same route in Angular 4 and catch the same event?

Okay, I have two use cases for my question here:
I'm working on an application which has a /en/register route. It all works good when I'm at the root and I click a button that does this.router.navigate([this.routeParams.lang, 'register']); and it's all good, this opens up a modal in the constructor (or ngOnInit, anyways) with ($('#modalRegister') as any).modal('show');.
It all works good, but if I close the modal, the route is still /en/register/ (yeah I can make it go to /en but see the use case #2 before you suggest this), so when I click the button, it doesn't do anything. Neither the constructor or ngOnInit are being called, not even route.params.subscribe() or route.url.subscribe() (which I think they should...).
In the same application, I have a button that does a search and centers some markers in a map (in /en/search/blah). That's all good if I'm in the index page or if I change the search query. However, if the user drags the map somewhere else and wants to have the same markers centered again, I also do this.router.navigate(['search', this.searchQuery]); and if it ends up being the same route (click the search button twice, for instance) it doesn't do anything.
While I agree it's good so the components don't get recreated if the URL hasn't changed, this is a bad design because in UI-router you could do the same thing and it'd work (as far as I can remember).
So, in Angular 4, how do I run the same code in the constructor/ngOnInit of the route's component when the same URL is being told to be navigated to? or how do I detect if the URL is the same and act accordingly? (although I still think it's bad design, but anyway...).
Any advice is greatly appreciated. Thanks!
When I needed to "reload" the current component's constructor and ngOnInit functions,
the only solution I found was kind of a workaround:
I used the fact that "this.router.navigate" returns a promise.
So I navigated somewhere else, and returned. It's a bit ugly but it works and the UI is not affected:
this.router.navigate(..[somewhere else]..)
.then(()=>{this.router.navigate(..back..)})
Hope it helps.
For case 1,
Why do you navigate to a new route just to open a modal. Just do it being at the same route with a function call. If you want to move to a new route then you can again call this.router.navigate("/") in modal close event.
For case 2,
Hope this will work.
currentSearchQuery: string;
ngOnInit() {
this.route.paramMap
.switchMap((params: ParamMap) => {
this.currentSearchQuery = params.get('searchQuery');
updateMarkers();
});
}
i use this workaround
this.router.navigate(['path']).then(()=> {window.location.reload();});
Just add dummy parameter at the end of the route /en/register/jk2h4-42hj-234n2-234dfg or query parameter like /en/register?val=jk2h4-42hj-234n2-234dfg
change the parameter value when calling the same route. So browser knows that URL change and Angualr component start to work from full life cycle.

Ember - abort the route and reload the route with same model

In my ember app, when the user clicks the Back button of browser,I need to stop the transition (whereever it might take me as per Ember history) and reload the same url with same model. Have tried the below code, but doesnt seem to work:
search-route.js
var route = Ember.route.extend({
actions:{
willTransition: function(transition){
if(this.controller.get('order') === 1){
transition.abort();
this.transitionTo('search',model)
}
}
}
})
This doesnt seem to work and gives error about query params. So, i looked for what is there in transition object. Saw that as soon as I enter this code, the object transition contains prop queryParams but with the old values, not the current URL one. But there is another prop - transition.intent.preTransitionState.fullQueryParams which contains the current URL query params. Would that be used here somehow.
I looked for solutions and someone also suggested to put in this.refresh(), but also didn't work.
I'm trying on my own ember app and doing a transition.abort() followed with a this.refresh() works.

Double state change in ui-router when using $state.go in $stateChangeStart

Here's my plunker. If you click on the profile link and look at the generated state change list:
stateChanges = [
" -> home",
"home -> profile",
"home -> signIn",
"signIn -> signIn"
]
you can see there's an unexpected extra state change "signIn -> signIn".
I've done some debugging and it seems it's ui-router's reaction to $locationChangeSuccess via the afterLocationChange function. But I'm not sure if that's a bug in ui-router or a result of how I configured ui-router and how I manage redirection. If the behavior is my fault, how do I fix it?
I would really appreciate the help, as the double state change causes my query parameters to be double URL encoded: /profile -> %2Fprofile -> %252Fprofile instead of just the first two.
UPDATE
It seems this is something that came with 0.2.15. I tried using older releases and even 0.2.14 works fine. After some investigation I found the problem came with commit 48aeaff. If I uncomment the code that was commented out by that commit, this issue goes away even on 0.2.15. For now I will use this modified version of the 0.2.15.
I also found that there's an issue in ui-router's issue tracker for this #1573.
kkIt looks like the problem lies in the Querystring you added in your $stateProvider
plunkr Demo
.state("signIn", {
parent: "frontpage",
url: "/signIn?returnTo", // <--- remove the ?returnTo
authorized: false,
views: {
"main#frontpage": {
template: "sign in page"
}
}
})
When this is changed to simply /signIn it should be fine. You might not be able to put ?queryStrings in your stateProvider allocations.
url: "/signIn" // It should work fine
As I went through your code, I found this block:
else if (authorized === true)
{
if (!service.authentication.authorized) {
$state.go("signIn", {
returnTo: toState.url
});
}
}
When you actually click from Home --> Profile, you would observer that authorized = true, and service.authentication.authorized = false. So, you're asking the browser to navigate to signIn state. However, you've clicked to Profile, and you're returning the browser to the same state that it was in.
I removed the statement event.preventDefault();from the above block, and it seems to be working fine now.

Nested multi column navigation

I am trying to get started with ember.js and have gone through the 'todo' tutorial as well as read most of the guide. However, I can't get this multi column navigation right and unfortunately haven't been able to find a similar example.
So, I am having multiple columns, let's call the first one a list of gallerys.
When the user selects the gallery, I would like to display all the images in the column next to the list of galleries. In the end I will be having more than two levels, but two should do for now. I have managed to display the list of galleries, but as soon as I select one, nothing happens. What am I doing wrong? I am also not quite sure how the best way to map the routes would be.
Here is the link to my code: http://emberjs.jsbin.com/gesereyu/1/edit
This is my router config:
App.Router.map(function() {
this.resource('gallerys', { path: '/' }, function() {
this.resource('gallery', { path: '/:gallery_id'});
});
});
I modified your bin a bit. Here is the working demo. Here are the changes I made.
In the link-to helper specify the route in quotes and all the model data that is to be the dynamic segment.
{{#link-to "gallery" this.id}}{{name}}{{/link-to}}
Instead of rendering the gallerys directly into the 'gallerys' route, render them into the gallerys/index route. This way you will not need to use the renderTemplate.
App.GallerysIndexRoute = Ember.Route.extend({
model: function () {
return this.store.find('gallery');
}
});

Categories