Ember transitionTo在没有sendAction的组件中清理干净 [英] Ember transitionToRoute cleanly in a component without sendAction

问题描述

可以从Ember组件中清理调用 transitionToRoute 吗？该组件并调用控制器的 transitionToRoute 函数，但是如果可能，我想要一些更优雅的东西。

它在组件的javascript内部看起来如何：

  // this.controller注入初始化器
这个。 controller.transitionToRoute（ some.target.route.name）; 
  

该组件的javascript会更好些：

  transitionToRoute（ some.target.route.name）; 
  

一个目标是不使用 sendAction 因为这个特定的组件有一个目的，应该总是转换到相同的路由。没有任何其他Ember工件不需要知道该组件始终转换到的路由，因此不需要关联的间接。目标路由的责任由该组件拥有。

解决方案

注入路由器进入组件并调用 this.get（'router'）。transitionTo（'some.target.route.name'）。

要将路由器注入所有组件，请在应用程序/初始化程序/组件路由器-injector.js 包含以下内容：

  // app / initializers / component-router- inject.js 
 export函数initialize（application）{
 //用路由器对象注入所有Ember组件：
 application.inject（'component'，'router'，'router：main' ）; 
} 
 
 export default {
 name：'component-router-inject'，
 initialize：initialize 
}; 
  

组件中的使用情况：

 从ember导入Ember; 
 
导出默认值Ember.Component.extend（{
 actions：{
 submit：function（）{
 this.get（'router'）。 some.target.route.name'）; 
} 
} 
}）; 
  

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.

解决方案

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');
    }
  }
});

这篇关于Ember transitionTo在没有sendAction的组件中清理干净的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！