在下拉菜單中存儲價值-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官方指南進行操作注冊和處理。 祝好運。