Aurelia - привязка ‹select› не устанавливает свойство модели представления

Когда создается раскрывающийся список выбора, связанное свойство в модели представления не обновляется до параметра по умолчанию.

например Учитывая эту модель просмотра:

export class App {

  @observable
  selected = 0;

}

и этот вид

<select value.two-way="selected">
  <option model.bind="1">1</option>
  <option model.bind="2">2</option>
  <option model.bind="3">3</option>
</select>

<span>
    The selected value is: ${selected}
</span>

При первоначальном отображении страницы вы увидите «Выбранное значение: 0», хотя в раскрывающемся списке будет отображаться 1. Измените раскрывающийся список на 2 и обратно на 1, и вы увидите «Выбранное значение: 1».

Я понимаю, почему у вас может быть такое поведение, но оно отличается от Knockout (я конвертирую старое приложение Durandal)... есть ли способ заставить свойство viewmodel быть одним из допустимых вариантов выбора?

Живой plunkr здесь: http://plnkr.co/edit/v4y3k3TcEzOrm4P2ulNy?p=preview

ПРИМЕЧАНИЕ: настоящий мировой код не предназначен для установки свойства 'selected' в несуществующее значение, в раскрывающемся списке есть преобразователь значений, который отфильтровывает параметры, но не заставляет свойство viewmodel обновить до варианта по умолчанию.

Спасибо.


javascript aurelia
person Simon    schedule 06.06.2018    source источник
comment
Дело в том, что даже несмотря на то, что элемент select не показывает selected-value (он не может показать то, чего нет в его опциях), он не выбрал selected-value (не может, потому что может только выберите то, что в его параметрах). Я рекомендую создать настраиваемый элемент или настраиваемый атрибут, в котором вы проверяете, существует ли выбранное значение в параметрах, а если нет, измените выбранное значение на первый элемент массива параметров ИЛИ вставьте элемент в параметр, который представляет выбранный вами параметр. ценность   -  person Schadensbegrenzer    schedule 06.06.2018
comment
@Schadensbegrenzer Возможно, вы неправильно понимаете, что вы говорите, но это невозможно, потому что он может выбирать только то, что есть в его параметрах - я понимаю, я не хочу, чтобы выбор менялся на несуществующее значение, я хочу свойство viewmodel, чтобы изменить фактическое значение выбора.   -  person Simon    schedule 06.06.2018
comment
Я понимаю. Но для того, чтобы это произошло автоматически, должно сработать событие изменения, которое не срабатывает, если значение отсутствует в списке параметров. document.getElementById("myselect").value = "-1" не будет запускать событие изменения. Поэтому я рекомендую вам обернуть ваши выборки в пользовательский элемент (или создать настраиваемый атрибут), который добавляет элемент опции, если selectedValue не существует в массиве опций.   -  person Schadensbegrenzer    schedule 06.06.2018
comment
Другой вариант, если вы по умолчанию используете нулевое значение, - это добавить пустой элемент опции в список выбора со значением 0, а затем использовать проверку, чтобы запретить его выбор.   -  person Ashley Grant    schedule 07.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Прочитайте объяснение Фреда здесь: https://github.com/aurelia/binding/issues/686

Если вы используете repeat.for для построения options. Он правильно установит начальное значение из-за задержки заполнения параметров, которая запускает событие изменения.

<select value.bind="selected">
  <option repeat.for="v of [1,2,3]" model.bind="v">${v}</option>
</select>

К вашему сведению, использование value.two-way необязательно, так как привязка значения по умолчанию является двусторонней для тега select/input.

person huocp    schedule 07.06.2018
comment
Спасибо - на самом деле я использовал repeat.for в реальном коде. К сожалению, это не исправляет это там (хотя это работает в моем простом plunkr). Не вижу проблемы! Спасибо за ваш ответ, хотя - person Simon; 08.06.2018