Ember 组件将动作发送到路由 [英] Ember component send action to route

问题描述

我有两个组件，一个放在另一个组件上.我需要从子组件向主路由发送一个事件(两个组件在同一路由中使用)

I have two component and one sitting on another. I need to send an event to main route from child component( both components use in same route)

请告诉我是否有任何标准方法可以做到这一点.

Please let me know is there any standard way to do that.

推荐答案

对于简短的回答，您可以使用 ember-route-action-helper 插件.

For short answer you can you can use ember-route-action-helper addon.

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

actions 的通信方式有 3 种，

There are three way of actions communication,

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

1. Old style classic functions style ie., passing function name as string from top to bottom. and in all the places we need to define same function and provide. Use sendAction to bubble. and send method bubble from controller to route hierarchy.

不鼓励这样做.示例经典样式 actions twiddle

This is not encouraged. Sample classic style actions twiddle

2.关闭操作使用 action 辅助传递函数而不仅仅是字符串.这样你就不需要在任何地方定义它.关闭操作的示例旋转样式

2. Closure actions Use action helper pass function instead of just string. so that you don't need to define it everywhere. sample twiddle for closure actions style

3.route-action-helper 插件您可以直接从任何地方直接调用路由操作，只需使用 route-action 助手包装函数即可.

示例旋转

Classic style 和 Closure style 的比较以及为什么 Closure 更受欢迎?

• 在经典风格中，您需要在每个级别定义操作并使用 sendAction 触发每个级别的操作，直到您完全摆脱嵌套.
• 您可以在闭包操作中返回值，但不能在经典操作中返回值.
• 您可以在闭包操作中使用柯里化值，但不能在经典操作中使用.
• 如果未找到操作，关闭操作会立即失败.但是设计的经典动作，只会在调用时懒惰地引发错误值.
• 编码复杂性，例如谁来处理操作和执行业务逻辑?.
• 在闭包中，你可以结合 action 和 mut helper 来设置一个带值的属性.onclick=(action (mut title) value="titlevalue")
• 在闭包中，您可以指定目标对象来调用函数.(action 'save' target=session) 会查看 session 对象上的 actions 哈希值，而不是当前上下文.

• In classic style, You need to define actions at each level and use sendAction to trigger the action at each level until you got all the way out of your nesting.
• You can return value in closure actions but not in classic actions.
• You can curry values in closure actions but not in classic actions.
• Closure actions fail immediately if the action is not found. but classic actions by design,would lazily raise errors only upon invocation values.
• Coding complexity like who will handle actions and do business logic?.
• In closure, you can combine action and mut helper to set a property with value. onclick=(action (mut title) value="titlevalue")
• In closure, you can specify target object to invoke function. (action 'save' target=session) would look at the actions hash on the session object instead of the current context.

一些关于此的有前途的文章，
- miguelcamba 文章 ember-closure-actions-in-depth
- emberigniter 文章 send-closure-actions-up-data-owner
- emberjs 博客 1.13 发布文章
- 船坞 - ember-最佳实践停止冒泡并使用关闭操作
- 来自 Ember 地图的博客 为什么是行动助手?
- Alisdair McDiarmid 的博客 ember-closure-actions-have-return-values
- alexdiliberto 的博客 ember-closure-actions

这篇关于Ember 组件将动作发送到路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！