在下拉列表中存储值 - Ember.js

Question

我以前从未使用过 Ember，而且对 JavaScript 还很陌生，过去几天一直在尝试将一些 HTML 和 JS 转换为 Ember 框架（我从一位同事那里得到了一些帮助）。我试图完成的是，首先；让谷歌地理编码器运行并用输入地址的纬度/经度填充一些文本字段，其次；根据用户从下拉菜单中所做的选择，用特定的电子邮件地址填充一些文本字段。一切都很好，除了当我从下拉列表中选择一个选项时，它有时会显示另一个选择（例如，选择“奥克兰”会显示“Butte”） - 猜测它有事可做有了“价值”，只是不确定如何解决和解决问题。有没有人对修复有任何想法，或者可能有另一种方法让它显示正确的选择，同时仍然将正确的电子邮件地址发送到文本字段？

链接到Ember Twiddle：MyProject

另外，单独的问题 - 我也不确定我的“dataValue”变量如何工作（routes/demo.js）；我的同事帮我解决了这部分问题，我只是有点不确定我的“setEmail”函数知道 dataValue 应该是什么，因为我无法弄清楚变量的设置位置。如果有人能帮我解决这个问题，我将不胜感激。

感谢任何建议和见解！谢谢。

Answer 1

你的问题是；您创建的各种选项共享完全相同的“价值”。解释;每当您从选择中选择一个选项时；如果 x-select 的值发生变化，所有 x-option 组件都会重新计算它们的“选定”计算属性。我已经修改了你的 twiddle，只是在 x-select 和 x-option 中插入了一些控制台日志，以便向你解释情况。请参阅modified twiddle。

首先选择 Oakland 并打开控制台并跟踪它。如你所见; x-select 首先将值更新为 1；并且所有值等于 1 的县（奥克兰、科利尔等）都输出它们的文本，因为它们都被选中了。由于 Butte 是列表中的最后一个选项，值为 1；它的文本显示在用户界面中。现在只需选择； Brevard 和预期的 St. Lucie 显示在用户界面中，但选择了所有值为 3 的选项，包括 Brevard 和 Indian River。现在只需选择印度河；这次 x-select 再次记录；但 x-options 不记录；因为 x-select 的值没有改变（它是 3；它仍然是 3，因为选择了具有相同值的选项）。

总结一下；在此实现中，您需要为每个县提供唯一的选项值。除此以外; prepopulatedCounties 数组中具有最大索引的县将在共享相同值的县中选择。如果您继续选择与上次选择的县具有相同值的另一个县；你会认为你的代码工作错误，因为 select 会正确显示它；然而事实并非如此！

如果您打算在 ember 中使用 select；我强烈建议您使用ember-power-select 而不是重新发明轮子。

关于你的第二个问题；它与动作有关。您通过this.sendAction('action', this.get('value'), this); 向路由器发送事件 在 x-select 中，您在 demo.js 路由器中处理此问题，因为您在 demo.hbs 中将 setEmail 声明为事件处理程序，并在最后一部分使用{{#x-select value=model.selectedCounty action='setEmail'}}。我强烈建议您查看 Emberjs 官方操作注册和处理指南。祝你好运。