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

Question

I've never worked with Ember before, and am fairly new to JavaScript, and have for the past couple of days been trying to translate some HTML and JS into the Ember framework (I got some help from a colleague). What I've tried to accomplish is, first; getting Google Geocoder to function and fill some text-feild with latitude/longitude from an inputted address, and second; filling some text-field with a specific email address based on what selection the user made from a drop-down menu. Everything is working quite good, except that when I select an option from the drop-down it sometimes displays another selection (for example, selecting "Oakland" displays "Butte" ) - guessing it has something to do with "value", just not sure how to address and fix the issue. Does anyone have any idea on a fix, or perhaps another approach to make it display the correct selection, while still sending the correct email-address to the text-field?

Link to an Ember Twiddle : MyProject

Also, separate question - I'm also not sure how my "dataValue"-variable works (routes/demo.js); my colleague helped me out with that part and I'm just a little unsure of my "setEmail"-function knows what dataValue is supposed to be as I can't figure out where the variable is set. If someone could clear that up for me, I'd very much appreciate it.

I appreciate any suggestions and insight! Thank you.

Answer 1

Your problem is that; various options you create share the exact same "value". To explain; whenever you select an option from the select; all the x-option components recalculates their "selected" computed properties in case the value of x-select changes. I have modified your twiddle and just inserted some console logs to x-select and x-option in order to explain you the situation. See the modified twiddle .

Initially select Oakland and open the console and trace it. As you see; x-select first updates the value to 1; and all counties with value equal to 1 (Oakland, Collier, etc.) outputs their text since they are all selected. Since Butte is the last option in list with value 1; its text is displayed in the user interface. Now just select; Brevard and as expected St. Lucie is displayed in the user interface but all options with value 3 are selected including Brevard and Indian River. Now just select Indian River; this time x-select logs again; but x-options do not log; because the x-select's value did not change (it was 3; and it is still 3 since an option with the same value is selected).

So to sum up; in this implementation you need to give unique option values to every single county. Otherwise; the county that has the largest index inside prepopulatedCounties array will be selected among the counties sharing same value. If you continue selecting another county that has the same value as the last selected one; you will think your code is working mistakenly because select will display it correctly; however that is not the case!

If you intent to use select in ember; I would highly recommend you to use ember-power-select instead of reinventing the wheel.

Regarding your second question; it is related with actions. You send an event to router via this.sendAction('action', this.get('value'), this); inside x-select and you handle this inside demo.js router because you declared setEmail as the event handler inside demo.hbs with {{#x-select value=model.selectedCounty action='setEmail'}} the last part. I highly recommend you to look at Emberjs official guide for action registration and handling. Good luck.