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

我有一个拥有用户路由获取用户模型的烬2.13应用程序。因此，在用户模板中，我显示了所有抓取的用户。我也有一个用户控制器，当用户点击时将数据提供给编辑表单。我正在使用用户控制器来执行此操作。如何将控制器数据传递到组件并备份在烬js

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

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

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

附上截图。

用户查看

点击的用户

来源

2017-09-21 Ashokaditya

这个答案适用于2.x.x并写成的2.15版本。

这听起来像你刚刚在Ember开始。欢迎！我强烈建议你做Tutorial并阅读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（））的位置。

祝你好运:)

来源

2017-09-21 13:20:05 handlebears

感谢@handlebears的提示又冗长的答复:)我已阅读指南和教程几次，但我想我有点忘了哪个用什么。尽管您的详细建议有帮助。再次感谢一堆。 – Ashokaditya

@Ashokaditya欢迎:) – handlebears

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

回答

相关问题