如何在 EmberJS 中使用组件干燥路由操作答案

【问题标题】：How to dry route actions with component in EmberJS如何在 EmberJS 中使用组件干燥路由操作
【发布时间】：2018-04-26 11:53:06
【问题描述】：

（EmberJS 2.14）

我想拥有带有 ember 的 DRY 应用程序，但是，似乎不可能使用路由操作。当我尝试使用触发操作的按钮组件时，它失败了：

new.js：

  export default Ember.Route.extend({
      model() {.....},
      actions: {
          saveStuff(newStuff) {
            newStuff.save().then(() => this.transitionTo('stuffs'));
          }

新的.hbs

{{basic-button texte="Create" theAction=(action 'saveStuff' model)}}

错误：

Assertion Failed: An action named 'saveStuff' was not found in (generated Stuffs.new controller)

我对删除操作和更新操作有同样的问题。我不能让自己在需要它的每个路由和视图中拥有相同的代码和模板行。

【问题讨论】：

移动到控制器的操作。
它打破了 transitionTo
要从控制器过渡到路由，请使用transitionToRoute。所以在你的情况下：this.transitionToRoute('stuffs').
您是否考虑在 basic-button 组件中定义操作并将其发送到路由？也许是旧的做事方式。

标签： ember.js ember.js-2

【解决方案1】：

路由不能很好地处理动作。有 3 个选项：

您可以使用此插件https://github.com/DockYard/ember-route-action-helper 在路线中处理您的操作。这定义了一个要使用的助手，例如：

{{basic-button texte="Create" theAction=(route-action 'saveStuff' 模型)}}
您可以添加一个controllers/new.js 控制器并在那里处理操作。（编辑：如果您担心多个控制器，可以将其添加到 application 控制器 controllers/application.js 并且如果您确实有全局操作（如“注销”），它将处理顶部的所有操作（如“注销”）
您可以将整个东西包装在一个组件中并传递模型。

【讨论】：

【解决方案2】：

我们只是想补充唐纳德已经回答的问题，并希望为您提供另一个示例，说明如何实现您想要实现的目标。

正如您提到的“代码重用”，我想您已经在应用程序中使用了组件。当我想在多个路由之间重复使用相同的“保存”操作时，我通常会实现一个组件来处理模型的编辑和实际的保存过程。

例如，我的主应用程序共享相同的表单来创建和编辑instance。在我的app/instances/new/template.hbs 中，我正在使用edit-instance 组件，然后我将在app/instances/edit/template.hbs 中重用相同的组件

{{edit-instance instance=model}}

我创建了一个游戏here，更详细地演示了这个原理。它所做的另一件事是它实际上封装通过注入store 服务在组件内创建新实例。

export default Ember.Component.extend({
  store: Ember.inject.service(),
  ...
})

这是一个方便的小技巧，起初可能看起来很奇怪，因为所有文档示例仅显示使用 route 文件中的存储。在组件中使用 store 并不总是最佳实践，但当您需要时，或者如果它简化了您的实现，它是一个有用的工具！

我不确定我是否支持 Twiddle 中示例的 UX/UI，但我认为它有助于解释一旦你尝试在组件中实现代码重用，你可以实现什么。

您可以在this Ember Twiddle 上看到整个示例，您可以在this YouTube video 上看到我们正在解决这个问题

我希望这会有所帮助?

【讨论】：

这是一个比我更好的答案:)
? 我不是 100% 肯定我同意@DonaldWasserman！您的回答很直接，直截了当@Syl 最初的要求，我们只是给了它一种不同的方法，以不同的方式实现“代码重用”。与以往一样，使用不同方法获得更多答案总是更好?

【解决方案3】：

我建议只创建一个控制器。我确实喜欢 Donald 关于使用 DockYard 的 route-action-helper 的建议（这是一个很棒的包）。但即使它说你可能不需要它。

你可能不需要使用这个插件。

如果您尝试不安装任何额外的软件包，我强烈建议您将您的操作移至控制器。控制器并没有被弃用，并且会出现一段时间，并且是为这些情况而设计的。如果您不熟悉控制器，我还建议您阅读他们参考的 DockYard 的这篇文章。

文章：https://dockyard.com/blog/2017/06/16/ember-best-practices-what-are-controllers-good-for

【讨论】：