javascript-在EmberJS中重定向

我是EmberJS的新手,因此非常感谢您的帮助.我正在尝试做一些我认为在理论上应该很简单的事情-我有一个组件,并且在DOM元素之一上,我想要一个单击处理程序,该处理程序可以重定向到路线,但是我一直无法弄清楚该如何做到这一点.

我有我的组成部分：
//components/sample-card-header.js

import Component from '@ember/component';
export default Component.extend({
  actions: {
    goToSamples() {
      this.transitionTo('samples');
    }
  }
});

还有我的车把模板：

//templates/components/sample-card-header.hbs

 < div class =“ card_header” {{action“ goToSamples” bubble = false}}>样本< / div>

我知道我可以做到：
< div class =“ card_header” onClick =“ window.location.href =('/ samples')”>但我想使用路由器路径.

提前致谢

解决方法:

问题是transitionTo在组件内部不可用.您有两个选择.您可以通过将代码修改为此来将操作传递到您的路线.

1.)在您的路线中创建一个动作来处理过渡,然后将该动作从组件中传递出去.跟进Ember的行动,降低数据的心态.

零件

import Component from '@ember/component';
export default Component.extend({
  actions: {
    goToSamples() {
      //this passes the action to the components parent. It could be a route, other component, etc..
      this.sendAction('transition');
    }
  }
});

路由template.hbs与组件

{{said-component transition='action-on-route'}}

route.js

...
actions: {
  action-on-route: function(){
    this.transitionTo('samples')
  }
}

2.)您可以将路由服务注入该组件.这将使transitionTo通过路由服务对组件可用.我仍然建议选择一种,因为它使组件更具扩展性.

您的新组件代码.

import Component from '@ember/component';
import { inject }from '@ember/service';
export default Component.extend({
  router: inject(),
  actions: {
    goToSamples() {
      this.get('router').transitionTo('samples');
    }
  }
});

另外一个选项

我在编辑时就想到了这一点.如果您只需要进行转换,则也可以使用链接到帮助器.链接帮助器提供了更改tagName的功能.因此,您可以使用带有click事件的div来渲染,以使用链接到帮助器来转换路线.

示例component.hbs

...
{{#link-to 'samples' class='card_header' tagName='div'}}
    Some html
{{/link-to}} 

标签：ember-js,javascript
来源： https://codeday.me/bug/20191109/2011324.html