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

时间:2016-06-02 13:02:12

标签: javascript html ember.js drop-down-menu

我以前从未与Ember合作过,而且对JavaScript很新,并且在过去的几天里一直试图将一些HTML和JS翻译成Ember框架(我得到了同事的一些帮助) 。我试图完成的是,首先;让Google Geocoder运行并从输入的地址填充一些带有纬度/经度的文本域,其次;根据用户从下拉菜单中选择的内容,使用特定的电子邮件地址填充一些文本字段。一切都运行得很好,除了当我从下拉列表中选择一个选项时,它有时会显示另一个选项(例如,选择"奥克兰"显示" Butte" ) - 猜测它与"值"有关,只是不确定如何解决和解决问题。有没有人对修复有任何想法,或者可能是另一种让它显示正确选择的方法,同时仍然向文本字段发送正确的电子邮件地址?

链接到Ember TwiddleMyProject

另外,单独的问题 - 我也不确定我的" dataValue" -variable如何工作(routes / demo.js);我的同事帮我解决了这个问题,我只是不确定我的" setEmail" -function知道dataValue应该是什么,因为我无法弄清楚变量在哪里组。如果有人能为我清楚,我非常感激。

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

1 个答案:

答案 0 :(得分:1)

你的问题是;您创建的各种选项共享完全相同的“值”。解释;每当您从选择中选择一个选项时;如果x-select的值发生变化,则所有x-option组件都会重新计算其“选定”计算属性。我修改了你的旋转,只是将一些控制台日志插入到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路由器中处理这个,因为你在最后一部分{{#x-select value=model.selectedCounty action='setEmail'}}的demo.hbs中声明了setEmail作为事件处理程序。我强烈建议您查看Emberjs行动登记和处理的官方指南。祝你好运。