将逻辑绑定到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>