将逻辑绑定到 Aurelia 中的 ValueConverter 输出

Question

我有一个绑定到 select 的列表，该列表依赖于绑定到不同 select 的另一个值。它们与 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;
}

唯一的问题是当从空切换到非空时，虽然不是列表中的选项，但 "No sites available" 选项仍然 select 编辑在 select 中。我需要摆脱它。接下来的想法是利用 Aurelia 的 if.bind，但我似乎无法绑定到 ValueConverter 的输出（出于显而易见的原因）。

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

Answer 1

尝试在 select 元素的临时属性中存储过滤后的结果。在哪里并不重要，只需要在某个地方即可 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>

将逻辑绑定到 Aurelia 中的 ValueConverter 输出

Bind logic to ValueConverter output in Aurelia

javascript

aurelia