Question

（EmberJS 2.14）

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

new.js：

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

new.hbs

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

错误：

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

我对删除操作和更新操作有同样的问题。我无法让自己在每个需要它的路径和视图中使用相同的代码和模板行。

Answer 1

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

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

{{basic-button texte =“创建”theAction =（路线动作'saveStuff'模型）}}
您可以添加controllers/new.js控制器并在那里处理操作。（编辑：如果您关注多个控制器，可以将其添加到application控制器controllers/application.js，如果您真的有全局操作（如“注销”），它将处理顶部的所有操作）
您可以将整个事物包装在一个组件中并传递模型。

Answer 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文件中的商店。在组件中使用商店并不总是最佳做法，但是当您需要时，或者如果它简化了您的实现，它是一个有用的工具！

我不确定我是否支持Twiddle中示例的UX / UI，但我认为一旦尝试在组件内部实现代码重用，就可以解释一下您可以实现的目标。

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

我希望这会有所帮助

Answer 3

我建议只创建一个控制器。我喜欢Donald建议使用DockYard的路线动作助手（它是一个很棒的包）。但即使它说你可能不需要它。

您可能不需要使用此插件。

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

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

如何使用EmberJS中的组件干燥路径操作

3 个答案: