Ember transitionToRoute cleanly in a component without sendAction

transitionto ember
ember transitiontoroute in component
ember inject router
ember transitionto not working
ember router
router transitionto
ember transition to url
ember replacewith external

How can transitionToRoute be called cleanly from within an Ember component?

It works with injecting a controller into the component and calling the controller's transitionToRoute function, however I'd like something a little more elegant if possible.

What it currently looks like inside the component's javascript:

// this.controller is injected in an initializer
this.controller.transitionToRoute("some.target.route.name");

What would be nicer in the component's javascript:

transitionToRoute("some.target.route.name");

One goal is do this without using sendAction as this particular component has a single purpose and should always transition to the same route. There's no need for any other Ember artifacts to be aware of the route this component always transitions to, there's no need for the associated indirection. The responsibility for the target route is owned by this component.



UPDATE Please see the other more recent answers for how to achieve this with less code in newer Ember versions, and vote those up if they work for you - Thanks!



Inject the router into the components and call this.get('router').transitionTo('some.target.route.name').

To inject the router into all components, write an initializer at app/initializers/component-router-injector.js with the following contents:

// app/initializers/component-router-injector.js
export function initialize(application) {
  // Injects all Ember components with a router object:
  application.inject('component', 'router', 'router:main');
}

export default {
  name: 'component-router-injector',
  initialize: initialize
};

Sample usage in a component:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit: function() {
      this.get('router').transitionTo('some.target.route.name');
    }
  }
});

Route transition with model from component, Hi, I want to redirect to a route "recipe/2" for example from a component. This may help Ember transitionToRoute cleanly in a component without sendAction. 10 Ember transitionToRoute cleanly in a component without sendAction 9 TypeScript properties returning a promise - Get/Set accessors must have the same type 6 How to make a fixed column in a responsive grid?

Jan 22, 2018 update As of Ember 2.15, phase 1 of the public router service is implemented. Transition to a route from inside a component:

import { inject as service } from '@ember/service';

export default Ember.Component.extend({
  router: service(),

  actions: {
    someAction() {
        this.get('router').transitionTo('index');
    }
  }

});

Ember transitionToRoute cleanly in a component without sendAction, How can transitionToRoute be called cleanly from within an Ember component? It works with injecting a controller into the component and calling the controller's  65 Ember transitionToRoute cleanly in a component without sendAction 62 What is the best way to convert all controller params from camelCase to snake_case in Rails? 28 Ember transitionToRoute cleanly in a component without sendAction

You can use container to get access to any needed part of application. To get application controller :

this.container.lookup('controller:application')

But what about structure of application - components should generate events - so my opinion it's better to use sendAction. Cause in future you can get situation, when you need to filter such behavior ( for example ) or other application-specific logic before transition

Ember transitionToRoute cleanly en un componente sin sendAction, app/initializers/component-router-injector.js export function initialize(application) { // Injects all Ember components with a router object: application.inject('​component', 'router', 'router:main'); } export El - porque aún no es una API pública. Controllers In Ember.js, controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server.

If you want to use the router only in a specific component or service or controller, you may try this:

Initialize an attribute with the private service -routing. The - because it's not a public API yet.

router: service('-routing'),

And then inside any action method or other function inside the service or component:

this.get('router').transitionTo(routeName, optionalParams);

Note: It'll be transitionToRoute in a controller.

Ember component action not bubbling up to template router, When I use the component I make it to its action but the sendAction never work or Ember transitionToRoute cleanly in a component without sendAction Link to  This sounds like it should be wrapped in a component. You can wrap the mouseMove and click event handlers in the component and the controller can pass in the actions to call when those events fire. for example you can have a component like export default Ember.Component.extend({ click: function (event)

Use router: service()

instead of router: service('-routing')

import Component from '@ember/component';
import {inject as service} from '@ember/service';

export default Component.extend({
  router: service(),

  actions: {
    onClick(params) {
      let route = this.getMyRoute(params);
      this.get('router').transitionTo(route);
    }
  }
});

ember.js/CHANGELOG.md at master · emberjs/ember.js · GitHub, Ember.js - A JavaScript framework for creating ambitious web applications #​18919 [BUGFIX] Add error for modifier manager without capabilities. Deprecate component#sendAction (see emberjs/rfcs#335 for more details) #16386 [​BUGFIX] Add an assertion if you attempt a transitionTo when the app is destroyed​. The other way would be to not rely on a library, in which case you would have to implement methods to retrieve models with AJAX calls. “Ember Without Ember Data,” by Robin Ward (the guy behind Discourse), is a great read. “Getting Into Ember.js, Part 3” by Rey Bango on Nettuts+ deals specifically with models.

User Eliot Sykes, transitionToRoute be called cleanly from within an Ember component goal is do this without using sendAction as this particular component  This makes it easy to unit-test your model without having to worry about logic related to your display creeping into your test setup. A Note on Coupling. In Ember.js, templates get their properties from controllers, which decorate a model. This means that templates know about controllers and controllers know about models, but the reverse is not

Ember.js Tutorial - From beginner to advance, 64 Ember transitionToRoute cleanly in a component without sendAction · 52 What is the best way to convert all controller params from camelCase to  Ember closure actions have return values. Ember 1.13 introduced closure actions, a significant change in how components communicate with their context. This new approach makes it much easier to work with nested components, as it's now possible to directly link a target and a grandchild component together.

ember-source @ 3.8.1 .. 3.9.0, The following component displays Ember's default welcome message. Our favorite Tomster disappeared but we have a clean welcome From Ember v3.1, it will work without .get() as well: we send the application back to the Libraries home page with transitionTo . sendAction('action', param); } } });  Ember noob here. I'm basically trying to have multiple input fields for multiple parameters. As the user types into the fields, this sends off a request to a PHP script which returns the relevant JSON and displays it. Ember 1.6.1 (latest version is a pain to learn as all of the docs are out of date) Handlebars 1.3.0; jQuery 1.11.1

Comments
  • Related question that may be of interest to readers: stackoverflow.com/questions/22389384/…
  • For 2017 readers: The problem with sendAction is that you have to keep bubbling that up if your components are nested. If you can send an action directly to the route from the component, it becomes a non-issue. Ember will eventually have routable components that allows you to talk directly to the route. Until then, use the the ember-route-action-helper to call a method directly on the route that your component exists on - such as transitionTo('name-of-route'). Read more here: dockyard.com/blog/2016/02/19/best-practices-route-actions
  • This is not recommended as it uses an internal API that could break. Actually the access to the container started to be deprecated on Ember 2.3 I think, and it's now replaced with a different interface (getOwner I think).
  • This is the only legitimate answer on this page, circa Ember ~3.11