0

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

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

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

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

附上截图。

用户视图

在此处输入图像描述

点击的用户

在此处输入图像描述

4

1 回答 1

3

此答案适用于 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()。

祝你好运 ：）

于 2017-09-21T13:20:05.513 回答