如何将控制器数据传递到组件中并在ember js中备份

Question

我有一个ember 2.13应用程序，该应用程序具有用户路由来获取用户模型。 因此，在用户模板中，我将显示所有获取的用户。 我还有一个用户控制器，当单击用户时，该控制器会将数据提供给编辑表单。 我正在使用用户控制器来执行此操作。

所有代码都在一个模板中，但是我想将呈现用户列表和编辑用户表单放在两个单独的组件中。 假设我制作了一个渲染单用户和编辑用户模板。 因此，当用户单击使用render-single-user组件渲染的用户时，此用户的数据应显示在edit-user组件渲染的dom中。

问题是组件无法访问路线的模型或应用程序的商店。

如果有人告诉我如何将模型从控制器传递到组件以及在渲染单用户组件和编辑用户组件之间进行传递，我将不胜感激。 并且，当用户单击更新/保存时，修改后的数据应传输到控制器，并将记录保存到存储中，从而向服务器发出发布请求。

截图。

使用者检视

点击的用户

Answer 1

此答案适用于版本2.xx，是从2.15版本开始编写的。

听起来您刚刚开始使用Ember。 欢迎！ 我强烈建议您阅读本 教程并阅读《指南》 。 他们是一项投资-事情会变得更快，之后对您来说会容易得多。 我要告诉你的一切都可以在那儿找到。 它们不可跳过。

在您的用户路线中：

model() {
   return this.store.findAll('users')
}

在您的用户控制器中：

actions: {
  consoleLogger(thingToLog) {
    console.log(thingToLog)
  }
}

数据和操作从控制器传递并向下路由到组件。 这是通过车把模板完成的。

将动作，模型和变量传递给组件的一般示例：

{{some-component 
   someControllerVariable=someControllerVariable
   mode=model 
   consoleLogger=(action "consoleLogger")}}

然后，在组件中，您可以使用以下操作：

<button {{action consoleLogger "string to log"}}>Log it</button>

或像这样在组件js中使用它：

this.get('consoleLogger')("string to log");
// this.get retrieves the function and then we call it with an argument, kind of like how you'd do someOtherFunction() in plain js

由于需要显示助手列表，因此需要在路线中使用每个助手 ：

{{#each users as |user|}}
       {{user-list-item 
       someControllerVariable=someControllerVariable
       user=user 
       consoleLogger=(action "consoleLogger")}}
{{/each}}

在组件中使用操作时，可以将记录作为参数传递。 他们将转到控制器操作，在这里您应该执行POST / PATCH / DELETE类型的操作，如save（）。

祝好运 ：）