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

ЗАБЕЛЕЖКА: истинският световен код не цели задаване на свойството „избрано“ на несъществуваща стойност, падащото меню има преобразувател на стойност, който филтрира опциите, но не принуждава свойството на модела на изгледа да актуализирайте до опцията по подразбиране.

Благодаря.


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

Отговори (1)


arrow_upward
1
arrow_downward

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

Ако използвате repeat.for за изграждане на опции. Той ще зададе правилно първоначалната стойност, поради забавената популация от опции, която задейства събитие за промяна.

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

За информация, използването на value.two-way не е необходимо, тъй като обвързването на стойността е по подразбиране двупосочно при таг за избор/въвеждане.

person huocp    schedule 07.06.2018
comment
Благодаря - всъщност използвах repeat.for в истинския код. За съжаление не го поправя там (въпреки че работи в моя прост plunkr). Не мога да видя проблема! Благодаря все пак за отговора - person Simon; 08.06.2018