Ember JS从日期选择器中选择日期时，更改按钮组件的颜色和标题

Posted 2021-05-06

我有一个网络应用程序，其中有两个组件 - 日期选择器和按钮。

当我从日期选择器中选择日期时，按钮的标题和颜色应该会改变。

这是我的hbs代码，其中给出了两个组件：

{{bootstrap-datepicker value=expiresAt todayHighlight=true todayBtn=true startDate=startDate changeDate="changeDateAction" autoclose=true}}
{{button-custom title="Previous Date" startDate=startDate status=1 id="button1"}}

按钮自定义由我创建。

当我选择日期时，将调用名为changeDateAction（）的datepicker中的函数。我在按钮组件的控制器中有一个函数，名为changeValues（），在调用它时将执行我的任务。

如何从另一个文件中的changeDateAction（）调用changeValues（）（在button-custom.js中）？

请尽可能简单，因为我是Ember JS的初学者。提前致谢。

答案

看起来你想通知一个组件（button-custom）关于兄弟组件（bootstrap-datepicker）的变化。您已经设置了一个动作处理程序（changeDateAction），它通知父组件/控制器有关更改的信息。为了将这个变化传播到button-custom，我建议你只想传递你想达到的效果：

{{bootstrap-datepicker changeDate="changeDateAction" (...)}}
{{button-custom title=title color=color (...)}}

像这样，您可以通过修改title和color从外部控制按钮的外观。像那样，逻辑被移动到父组件/控制器，按钮组件变成“哑”表示组件。

这背后的基本概念叫做“Data down，Actions up”（DDAU），我强烈建议你阅读它（例如here，如果你正在学习Ember！