Question

给定一个通过'with'绑定到一个observable的元素，如何在observable为'undefined'的同时显示一个占位符元素？

我试图解决的具体问题是选项绑定，它取决于对第二个，父选项绑定的选定值的'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应该在子选择中显示什么，当它'undefined'时？但是，我正在寻找一种解决方法，使UI看起来不错。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Knockout - 当'with'绑定未定义时显示占位符

1 个答案: