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

Question

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

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

问题是组件无法访问路由模型或应用商店。

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

附上截图。

用户视图

点击的用户

Answer 1

此答案适用于版本 2.x.x 并且是从 2.15 开始编写的。

听起来你才刚刚开始 Ember。欢迎！我强烈建议您执行 Tutorial and read The Guides。它们是一项投资——事情会进展得更快，之后对您来说也会更容易。我要告诉你的一切都可以在那里找到。它们不可跳过。

在您的用户路线中：

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 helper：

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

当在您的组件中使用该操作时，您可以将记录作为参数传递。他们将转到控制器操作，那是您应该执行 POST/PATCH/DELETE 类型操作的地方，例如 save()。

祝你好运:)

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

how to pass controller data into component and back up in ember js

javascript

ember.js

ember-data

ember-controllers

ember-components