淘汰赛 - 未定义“with”绑定时显示占位符

Question

给定一个通过“with”绑定到可观察对象的元素，我如何在可观察对象为“未定义”时显示占位符元素？

我要解决的具体问题是一个选项绑定，它通过“with”绑定依赖于第二个父选项绑定的选定值。虽然未选择父选项绑定，但 DOM 中甚至不存在子选择列表。这对用户来说看起来很奇怪，因为在他们从父下拉列表中进行第一次选择之前存在间隙，然后才会出现子下拉列表。

代码如下所示：

<select data-bind="options: parents,
                   optionsText: 'name',
                   value: selectedParent,
                   optionsCaption: 'Select parent'"></select>

<div data-bind="with: selectedParent">
    <select data-bind="options: children,
                   optionsText: 'name',
                   value: selectedChild,
                   optionsCaption: 'Select child'"></select>
</div>

在用户从父选择中进行选择之前，我的 UI 中会出现一个洞，子选择将出现在该处。

我理解为什么会发生这种情况，因为当 Knockout 为“未定义”时，应该在子选项中显示什么？不过，我正在寻找一种解决方法来使 UI 看起来不错。

Answer 1

如果您担心下拉菜单突然出现在屏幕上并且在 UI 中看起来很奇怪，为什么不先显示它，而是在 selectedParent 有值之前禁用它。

除了新的enable 绑定和默认的disabled 元素设置之外，我已将with 绑定移出并相应地更新了子options。

class ViewModel {
  constructor() {
    this.parents = [{
      name: "A",
      children: [{ name: "A1" }, { name: "A2" }, { name: "A3" }]
    }, {
      name: "B",
      children: [{ name: "B1" }, { name: "B2" }, { name: "B3" }]
    }];
    this.selectedParent = ko.observable();
    this.selectedChild = ko.observable();
  }
}

const vm = new ViewModel();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: parents,
                   optionsText: 'name',
                   value: selectedParent,
                   optionsCaption: 'Select parent'"></select>

<div>
  <select data-bind="options: selectedParent() ? selectedParent().children : [],
                   optionsText: 'name',  
                   value: selectedChild,
                   optionsCaption: 'Select child',
                   enable: selectedParent" disabled="disabled"></select>
</div>