Добавить выбранный атрибут в опцию на основе выражения в Aurelia

Question

У меня есть HTML-тег выбора (используя select2) в моем представлении Aurelia, в котором я хочу добавить selected атрибут тега option на основе логического выражения. Выражение будет истинным только один раз. Вот мой код (это прекрасно работает):

<select class="js-example-basic-single" style="width:200px;">
  <option repeat.for="region of personRegionDetail" value="${region.Id}">${region.Name}</option>
</select>

Я ищу что-то вроде этого (если это возможно) внутри моего тега option:

${if(region.Id === persondetail.RegionId){ selected }}

Я также пытался использовать jQuery, но это показывает мне выбранную опцию, только когда я обновляю страницу:

<script type="text/javascript">
  //Initialize select2
  $('select.js-example-basic-single').select2();
  //I tried this
  //The searched option value contains ${persondetail.RegionId} 
  $('select.js-example-basic-single').val("${persondetail.RegionId}").trigger("change");
</script>

Я получаю доступ к странице из другого вида, нажимая на ссылку, используя route-href="route:routename"(если это что-то говорит).

У меня вопрос, как я могу решить эту проблему, чтобы показать выбранный вариант, когда я вошел на страницу?

РЕДАКТИРОВАТЬ: мне нужно инициализировать select2 через несколько миллисекунд, чтобы показать выбранный вариант (вероятно, я должен ждать ответа API). Это вызвало проблему с jQuery.

Answer 1

Вы должны использовать selected.bind:

<option repeat.for="region of personRegionDetail" value="${region.Id}" selected.bind="region.Id === $parent.Id">${region.Name}</option>

Плункер: http://plnkr.co/edit/Uy6eQWZu6PrOwaXeArOx?p=preview