Сохранение значения в раскрывающемся списке - Ember.js

Question

Я никогда раньше не работал с Ember и довольно новичок в JavaScript, и последние пару дней пытаюсь перевести некоторые HTML и JS в рамки Ember (Я получил помощь от коллеги). То, что я пытался сделать, сначала; заставить Google Geocoder функционировать и заполнять некоторые текстовые элементы широтой/долготой с введенного адреса, а второй; заполняя текстовое поле конкретным адресом электронной почты, исходя из того, какой выбор пользователь сделал из выпадающего меню. Все работает неплохо, за исключением того, что когда я выбираю параметр из раскрывающегося списка, он иногда отображает другой выбор (например, выбор «Окленд» отображает «Бит») - угадывая, что это имеет какое-то отношение к «значению», просто не уверен, как решить проблему и устранить ее. Кто-нибудь имеет представление об исправлении или, возможно, другом подходе, чтобы отобразить правильный выбор, при этом посылая правильный адрес электронной почты в текстовое поле?

Ссылка на Ember Twiddle: MyProject

Кроме того, отдельный вопрос - я тоже не знаю, как мой "DataValue" -переменная работа (маршруты/demo.js); мой коллега помог мне с этой частью, и я немного не уверен в своей функции «setEmail», которая знает, что такое dataValue, как я не могу понять, где установлена ​​переменная. Если бы кто-то мог это понять, я бы очень признателен.

Я ценю любые предложения и понимание! Спасибо.

Answer 1

Ваша проблема в том, что; различные варианты, которые вы создаете, разделяют то же самое «значение». Объяснить; всякий раз, когда вы выбираете опцию из выбранного; все компоненты x-option пересчитывают свои «выбранные» вычисленные значения в случае изменения значения x-select. Я изменил ваш twiddle и только что вставил несколько консольных журналов в x-select и x-option, чтобы объяснить вам ситуацию. См. modified twiddle.

Первоначально выбирайте Окленд и откройте консоль и проследите ее. Как видишь; x-select сначала обновляет значение до 1; и все округа со значением, равным 1 (Oakland, Collier и т. д.), выводят свой текст, поскольку все они выбраны. Поскольку Butte является последним вариантом в списке со значением 1; его текст отображается в пользовательском интерфейсе. Теперь просто выберите; Бревард и, как и ожидалось, Сент-Люси отображается в пользовательском интерфейсе, но выбираются все варианты со значением 3, включая Бревард и Индийскую реку. Теперь просто выберите Индийскую реку; на этот раз x-select logs снова; но x-options не регистрируются; потому что значение x-select не изменилось (это было 3, и все равно 3, поскольку выбрана опция с тем же значением).

Итак, подведем итог; в этой реализации вам нужно предоставить уникальные значения параметров для каждого отдельного округа. В противном случае; округ, который имеет наибольший индекс внутри массива prepopulatedCounties, будет выбран среди округов, разделяющих одно и то же значение. Если вы продолжите выбор другого округа, которое имеет то же значение, что и последний выбранный; вы подумаете, что ваш код работает ошибочно, потому что select отобразит его правильно; однако это не так!

Если вы намерены использовать select в ember; Я настоятельно рекомендую вам использовать ember-power-select вместо того, чтобы изобретать колесо.

Что касается второго вопроса; это связано с действиями. Вы отправляете событие на маршрутизатор через this.sendAction('action', this.get('value'), this); внутри x-select, и вы обрабатываете этот внутренний маршрутизатор demo.js, потому что вы объявили setEmail как обработчик события внутри demo.hbs с {{#x-select value=model.selectedCounty action='setEmail'}} последней частью. Я настоятельно рекомендую вам ознакомиться с официальным руководством Emberjs для регистрации и обработки действий. Удачи.