在下拉菜单中存储价值-Ember.js

Question

我以前从未使用过Ember，并且对JavaScript还是很陌生，并且在过去的几天里，我一直在尝试将一些HTML和JS转换为Ember框架（我从同事那里得到了一些帮助）。 首先，我试图做到的是： 使Google Geocoder正常运行，并从输入的地址中用纬度/经度填充一些文本字段，其次； 根据用户从下拉菜单中进行的选择，使用特定的电子邮件地址填充某些文本字段。 一切工作正常，只是当我从下拉菜单中选择一个选项时，它有时会显示另一个选择（例如， 选择“ Oakland”时显示“ Butte” ）-猜测它与“ value”有关，只是确定如何解决和解决此问题。 是否有人对修复有任何想法，或者有其他方法可以使它显示正确的选择，同时仍将正确的电子邮件地址发送到文本字段？

链接到Ember Twiddle ： MyProject

另外，还有一个单独的问题-我也不确定我的“ dataValue”变量如何工作（routes / demo.js）； 我的同事帮了我这部分，我对我的“ setEmail”功能有点不确定，因为我不知道变量的设置位置，所以知道应该是什么dataValue。 如果有人可以帮我解决这个问题，我将非常感激。

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

Answer 1

你的问题是； 您创建的各种选项共享完全相同的“值”。 解释; 每当您从选择中选择一个选项时； 如果x-select的值发生更改，则所有x-option组件都会重新计算其“选定的”计算属性。 我已经修改了您的方法，只是向x-select和x-option插入了一些控制台日志，以向您解释这种情况。 参见修改后的旋转 。

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

总结一下； 在此实现中，您需要为每个县赋予唯一的选项值。 除此以外; 在具有相同值的县中，将选择prepopulatedCounties数组中索引最大的县。 如果继续选择与上一个选定县具有相同值的另一个县； 您会认为您的代码工作不正确，因为select可以正确显示它； 但是事实并非如此！

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

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