如何将mdc-select（材料设计组件）与Aurelia结合使用

Question

目前我正在开展一个项目，我们将Aurelia与Material Design Components结合使用。由于该项目相当新，我们使用的是MDC版本0.13。

我们正在使用多个选择字段，其中一些字段应具有初始值，如下面的代码段所示：

＆＃13;

＆＃13;

<select value.bind="_PersonID" class="mdc-select mdc-list-item__end-detail">
  <option model.bind="null">Select person</option>
  <option repeat.for="person of Persons" model.bind="person.ID">${person.Name}</option>
</select>

＆＃13;

＆＃13;

＆＃13;

这很有效，就像我们期望的那样。但现在我们想要mdc-select structure & styling这种行为。为此，我们使用以下内容：

＆＃13;

＆＃13;

<div mdc-select role="listbox" class="mdc-select mdc-list-item__end-detail">
  <span class="mdc-select__selected-text">????</span>
  <div class="mdc-simple-menu mdc-select__menu">
    <ul class="mdc-list mdc-simple-menu__items">
      <li class="mdc-list-item" role="option" repeat.for="person of Persons" model.bind="person.ID">${person.Name}</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这篇文章的问题在于我们只有一个＆＃34; CurrentPersonId＆＃34;。但我们必须在标签中定义名称。在MDC的文档中，它还声明了一个＆＃34; aria-selected＆＃34; li中的属性。当我们将它放在li标签上时，它不会在init上更新span。