jquery - 基于 Aurelia 中的表达式将所选属性添加到选项

Question

我的 Aurelia View 中有一个 select html 标记(使用 select2)，我想在其中将 selected 属性添加到 option基于 bool 表达式的标签。该表达式只会为真一次。这是我的代码(这很好用):

<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"(如果它说明了什么)单击链接，从另一个 View 访问该页面。

我的问题是如何解决这个问题，让我在进入页面时显示选择的选项？

编辑: 我需要在几毫秒后初始化 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