首页 文章

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

提问于
浏览
2

给定一个通过'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看起来不错 .

1 回答

  • 2

    如果您担心屏幕上突然出现下拉并且在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>
    

相关问题