ember.js Ember组件将操作发送到工艺路线

mdfafbf1  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(169)

我有两个组件,一个位于另一个之上。我需要从子组件向主路由发送事件(两个组件在同一个路由中使用)

请让我知道有什么标准的方法来做到这一点。

p4rjhz4m

p4rjhz4m1#

对于简短的答案,你可以使用ember-route-action-helper插件。

<button {{action (route-action 'onButtonClick')}}>ClickToCallRouteAction</button>

有三种行动沟通方式,

1.旧式经典函数风格即,将函数名作为字符串从上到下传递。在所有需要定义相同函数并提供的地方。使用sendAction冒泡。和send方法从控制器冒泡到路由层次结构。

不建议这样做。示例经典风格actions twiddle

2.闭包操作使用action辅助传递函数而不仅仅是字符串。这样就不需要在任何地方定义它。sample twiddle for closure actions样式
**3. route-action-helper addon**通过使用route-action帮助器 Package 函数,您可以直接从任何地方调用route操作。

Sample twiddle

经典款式和闭合款式的比较以及为什么闭合款式更受欢迎?

  • 在经典风格中,您需要在每一层定义操作,并使用sendAction触发每一层的操作,直到您完全脱离嵌套。
  • 您可以在闭包操作中返回值,但不能在经典操作中返回。
  • 您可以在结束动作中咖喱值,但不能在经典动作中使用值。
  • 如果找不到关闭动作,关闭动作会立即失败。但是传统动作的设计,只会在呼叫值时延迟引发错误。
  • 编码复杂性,例如谁来处理操作和业务逻辑?
  • 在闭包中,可以将action和mut helper结合起来,设置一个值为. onclick=(action (mut title) value="titlevalue")的属性
  • 在闭包中,您可以指定目标对象来调用函数。(action 'save' target=session)将查看session对象上的actions哈希,而不是当前上下文。
    一些关于这方面的有前途的文章
umuewwlo

umuewwlo2#

从Ember 3.14,Octane开始,我们可以用一种现代的、明确的、简洁的、清晰的方式来解决这个问题--我们将在这个简短的休息之后开始:
我需要将事件从子组件发送到主路由
虽然这是 * 可能的 *,但强烈建议不要这样做,因为Routes不应该有动作,并且应该是无状态的。也就是说,我们可以通过以下几种方法来解决动作通过深层组件传递的问题:

对于第一个“向下数据,向上操作”,您可以根据需要向下传递任意多个组件层的参数

// app/controllers/application.js:
@action
dance(){
  console.log('┏(-_-)┓┏(-_-)┛┗(-_- )┓')
}

// app/templates/application.hbs
<Foo @dance={{this.dance}} />

// app/components/foo.hbs
<Bar @dance={{@dance}} />

// app/components/bar.hbs
<button {{on 'click' @dance}}>Dance!</button>

虽然只有两个组件来向下发送数据和 * 操作 * 备份(在本例中是单击后),但这看起来并不太费力,但许多UI可能有10多个组件,并适合于称为Prop-Drilling的反模式。
为了减少 * 支撑钻井 *,我们有另一种方法在我们的工具箱达到。服务!

// app/services/my-service.js
@action
dance(){
  console.log('┏(-_-)┓┏(-_-)┛┗(-_- )┓')
}

// app/components/bar.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class Bar extends Component {
  @service myService;
}

// app/components/bar.hbs
<button {{on 'click' this.myService.dance}}>Dance!</button>

深度嵌套的组件可以直接访问操作,而不需要通过几个层传递--这导致了更易于维护和更清晰的代码。

资源

相关问题