I have an Ember application with several routes and I want to scroll the page to top every time the user makes a transition. The problem is that I don't want to duplicate the same code on every route's didTransitionmethod.
So, Is there a way that I can observe all routes transitions and execute (declare) an action in just one place ?
Another way to put put this: If I have a parent route, can I fire the same action to all of its children ?
My current solution is to fire the action on every route's didTransition method like this:
//router.js
Router.map(function() {
this.route('login');
this.route('portal',{ path:'/'}, function() {
this.route('clientes');
this.route('convite');
this.route('usuario', function() {
this.route('view', { path: '/:id' });
});
});
//everyChildren.route.js
didTransition(){
this.super(...arguments);
Ember.$("html, body").animate({ scrollTop: 0 }, "slow");
}
Is there a way to do this ?
PS:. I am using Ember version 2.14.0
You can try to define didTransition action on application route. If child route does not define handler for event, it should bubble up to parent route and application is a most top route.
Alternatively, you can create a mixin with didTransition action, and add that mixin to certain routes.
Also, looking at your code I think you might be interested in using liquid-fire addon (if your goal is animated transitions)
Use ember-router-scroll.
This addon does what you want
Related
I have two nested routes, projects and projects/project. Whenever I open a project, I would like the projects route to be refreshed.
What I am doing know is to call a controller function during the setupController hook (that will end up calling refresh in the projects route). Something like this:
// project route
setupController: function(controller, model) {
this.controllerFor('projects').send('search');
controller.set('model', model)
}
// projects controller
actions: {
search: function() {
// do other things
this.send('refreshModel');
}
}
// projects route
actions: {
refreshModel: function() {
this.refresh();
}
}
The problem is that, when the refresh function is called, it not only refreshes the current route, but also all the children routes, meaning that this setupController hook will be executed again, creating this infinite loop.
Is there a way to make Ember refresh just the current route, ignoring its children?
Thank you.
To answer directly, there is no way to only refresh the parent route. You might, however, be able to just reload the model and still get the behaviour you need.
See the relevant API documentation for DS.Model#reload.
Is there a route hook in Ember.js that is called on every transition, even if the new route is the same as the old route (for example, clicking a top-level navigation link to the same route).
I tried activate, but it's only being called once, and is not being called again when I use the top-level navigation to go to the same route I'm already in.
Example jsFiddle: When I click "Test" the first time, the activate hook is called, but when I click it a second time, it does not.
You can setup a didTransition in the router, exactly how Ember does it for Google Analytics.
App.Router.reopen({
doSomething: function() {
// do something here
return;
}.on('didTransition')
});
See example here: http://emberjs.com/guides/cookbook/helpers_and_components/adding_google_analytics_tracking/
UPDATE: (new link since old is broken)
https://guides.emberjs.com/v1.10.0/cookbook/helpers_and_components/adding_google_analytics_tracking/
Activate is not being called a second time because This hook is executed when the router enters the route... And when you click on that link-to a second time, the router isn't doing anything... As in, no transition is being made (although it is "attempted").
http://emberjs.com/api/classes/Ember.Route.html#method_activate
The method that I have found to work best is observing the currentPath from within a controller. I use this for animations between routes.
In your application controller you can do something like the following:
currentPathChange: function () {
switch(this.get('currentPath')){
case 'test.index':
this.doSomething();
break;
case 'test.new':
this.doSomethingElse();
break;
}
}.observes('currentPath')
You should be able to access almost any part of your app from the application controller, so it's a nice "root hook," I suppose.
Example: http://jsfiddle.net/mattblancarte/jxWjh/2/
Did you already consider the hook willTransition?
http://emberjs.com/guides/routing/preventing-and-retrying-transitions/
App.SomeRoute = Ember.Route.extend({
actions: {
willTransition: function(transition) {
// do your stuff
}
}
});
Alter/Hack EmberJS code and add a jQuery event trigger inside the doTransition() Function. This is Best but kind of defeating the point.
As of today, 1 year later and Ember 2.0 kind of out, there is NO OTHER WAY :(
Ember does not provide a way to track route-change attempts! This includes URLattemts(history), link-to attempts, hash change attempts etc..
I have an app with many similar views which I instantiate programmatically to "DRY-up" my app.
The problem is that controllers instantiated programmatically do not delegate actions in the actions hash further. This is clear because there is nothing from which the controller can derive the hierarchy. There should be a way, however, to tell a controller which parent controller it has to use for event bubbling. Does anyone know it?
You shouldn't be initializing controller's on your own. All controller initialization should be handled by Ember itself. Another interesting note, controller's are intended to be singletons in the application. The only exception to this being the itemController when looping over an ArrayController. You can read more about it in the guides. Quote from the guides:
In Ember.js applications, you will always specify your controllers as
classes, and the framework is responsible for instantiating them and
providing them to your templates.
This makes it super-simple to test your controllers, and ensures that
your entire application shares a single instance of each controller.
Update 1:
An example of how to do routing for a wizard:
App.Router.map(function() {
this.resource('wizard', function() {
this.route('step1');
this.route('step2');
this.route('step3');
});
});
This way, you can have a separate controller/view/template per step of the wizard. If you have logic around how much of each step should be completed prior to transitioning to the next one, you can handle that in the individual routes.
Update 2:
In the event that the number of steps aren't predetermined, but are based on the data being fed to the app, you can make a WizardController that is an ArrayController where each item in the array is a step in the wizard. Then, use the lookupItemController hook on the ArrayController, kind of like this:
App.WizardRoute = Ember.Route.extend({
model: function() {
return [
{controllerName: 'step1', templateName: 'step1'},
{controllerName: 'step2', templateName: 'step2'},
{controllerName: 'step3', templateName: 'step3'}
];
}
});
App.WizardController = Ember.ArrayController.extend({
lookupItemController: function(modelObject) {
return modelObject.controllerName;
}
});
{{#each step in controller}}
{{view Ember.View templateName=step.templateName}}
{{/each}}
As another, probably better, alternative, you can override the renderTemplate hook in the route where you're pulling down the model for the next step in the wizard and pass in the appropriate templateName and controller in the render call, kind of like you see here.
Point being, I think it should be possible to do this without having to instantiate controllers yourself.
In my application, I have the standard parent/children routes relationship. I want to execute a function every time the user clicks (via {{link-to}}) into a new route. I've tried implementing this function in the parent and children routes' activate hook, but the function is called only when the application first starts, and not called during subsequent route transition.
Is there a way to tell Ember to execute a function every time the user transitions into a new route?
There is a willTransition action, that is called when a transition is made. You can use the following to get all transitions:
App.ApplicationRoute = Ember.Route.extend({
actions: {
willTransition: function(transition) {
console.log('Transitioning to', transition.targetName);
}
}
});
This is a fiddle with this in action http://jsfiddle.net/marciojunior/Cs7S6/
I have a question about Ember routing and controllers. I've just written a small App to get familiar with the new router. Therefore I've built a button that transitions to another state by clicking on it.
App.PostsView = Em.View.extend({
click: function() {
var router;
this.get('controller').transitionTo('about');
}
});
My question now is: what does the get method return?. Obviously an instance of the PostController but on the one hand the controller doesn't have a transitionTo() method and on the other hand that would not make any sense.
this.get('foo') returns a property of your Ember object. Since Views can have a "controller" property, this.get('controller') returns the controller bound to your view's controller property (by default the postsController).
this.get('controller').transitionTo() works because as sly7_7 mentioned, transitionTo() is also defined on the controller and delegates to the router. Note, it's probably going to be deprecated and one should use
this.get('controller').transitionToRoute('about');
instead.
You should not do this at the view level, this is what the router is designed for so instead of capturing a click event in the view, rather implement an action on the button and let the router handle it. I suggest you learn the best practices from the get-go, chances are your application will evolve, requiring more elaborate concepts such as handling transactions commits/rollbacks, creating/updating records. So here's my suggestion to you
In your view
<button type="button" {{action onSaveClick}} />Save</button>
In your router
App.FooRoute = App.Route.extend({
events: {
onSaveClick: function() {
this.transitionTo('bar');
}
}
})
If for any other reasons, say styling or animation, you find yourself forced to capture the click event in the view, then i suggest to, capture the event, perform your styling and finally send an event to the controller. The event can then be handled the same way in the router
App.FooView = Ember.View.extend({
click: function() {
// Do some styling
this.get('controller').send('onSaveClick')
}
})
Finally speaking of best practices, try to learn when working with ember to think of your application as a series of states interacting with each other. You'll find yourself bound to implement the concept right. Have a look at this
the controller has a transitionTo: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/ext/controller.js#L36, it basically delegate to it's target (which is the router)