knockout.js - knockout.js 并没有在页面加载时绑定下拉列表

Question

我有一个绑定到下拉列表的可观察数组。下拉列表通过 ASP.NET MVC Html Helpers 在页面加载时填充，但由于可观察数组设置为 []，它会删除所有内容。有没有办法让它不删除页面加载或初始应用绑定时的所有内容。

Answer 1

听起来您想稍后从可观察数组中设置选项（可能来自 AJAX 调用？）。Knockout 没有任何内置的方法来做到这一点。我看到你至少有三个选择：

1. 显而易见的方法是让您的 ASP.NET 代码填写可观察数组而不是选择列表。然后 Knockout 将做正确的事情并填充您的下拉列表。

2. 使用包装绑定的自定义绑定options，但忽略空数组：

   ko.bindingHandlers.optionsNotBlank = {
       update: function (element, valueAccessor, allBindingsAccessor) {
           var value = ko.utils.unwrapObservable(valueAccessor());
           if (value.length)
               ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessor);
       }
   };
   

3. 动态设置options下拉列表上的绑定。这不是已发布的功能，但确实使用了导出的 Knockout 方法。代替使用标准data-bind属性，您将使用该ko.applyBindingsToNode方法并在您填写完可观察数组后将绑定对象传递给它。不过，您需要小心只调用ko.applyBindingsToNode一次。

   viewModel.myArrayOfItem(newValues);
   if (!boundDropDown) {
       ko.applyBindingsToNode(document.getElementById("mydropdown"), { options: viewModel.myArrayOfItems }, viewModel);
       boundDropDown = true;
   }
   

编辑：

这是基于使用“脏”标志的评论的第四个选项：

    ko.bindingHandlers.optionsNotBlank = {
        update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                isDirty = element._isDirty;
            if (isDirty || value.length) {
                element._isDirty = true;
                ko.bindingHandlers.options.update(element, valueAccessor, allBindingAccessor);
            }
        }
    };