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;
}

唯一的问题是从空切换时 - ＆gt;非空，但不是列表中的选项，选择中仍然选中“无可用站点”选项。我需要摆脱它。接下来的想法是利用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>

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

1 个答案: