將邏輯綁定到Aurelia中的ValueConverter輸出

Question

我有一個列表，我綁定到一個選擇，依賴於另一個綁定到不同選擇的值。 它們與ValueConverter捆綁在一起：

<option repeat.for="site of sites | filter: { project: project }">
  ${site.name}
</option>

現在，這可能會過濾掉所有內容。 在這種情況下，我想顯示一個選項'No Sites Available'。 我嘗試過做一個性感的css方法：

<option class="if-empty">No Sites Available</option>

.if-empty { 
  display: none;
}
.if-empty:only-child {
  display: initial;
}

唯一的問題是當從空切換 - >非空，但不是列表中的選項時，在選擇中仍然選擇“無可用站點”選項。 我需要擺脫它。 接下來的想法是利用Aurelia的if.bind ，但我似乎無法綁定ValueConverter的輸出（出於顯而易見的原因）。

<option if.bind="sites == null | filter: { project: project }">No Sites Available</option>

Answer 1

嘗試將篩選結果放在select元素的ad-hoc屬性中。 在哪里真的不重要，只需要你可以ref地方。

<select ref="mySelect" filtered.bind="sites | filter: { project: project }">
  <option if.bind"mySelect.filtered.length === 0">No Sites Available</option>
  <option repeat.for="site of mySelect.filtered">${site.name}</option>
</select>