引导多选 selectAll 不适用于 Knockout.js 除非使用 setTimeout

Question

显然，在将 jQuery multiselect multiselect()与 Knockout.js 一起使用时，Bootstrap 多选有一个限制，因此如果在 Knockout 事件（单击事件，在以下示例中）期间代码修改了多选下拉列表，则不会应用该代码。

下面的例子演示了它：

1. 首先，单击左侧的按钮。 您会看到，尽管创建了选项，但并未选择它们。 您需要再次单击以使它们被选中。
2. 然后，单击右侧的按钮。 您将看到已创建和选择选项。 我使用了 1000 毫秒超时，但它也仅适用于 1 毫秒超时。

我的问题：有没有比超时更好的方法来使selectAll()工作？

 var selectorVM = function () { var self = this; self.available = ko.observableArray([]); self.selected = ko.observableArray([]); self.init = function () { self.initOptions(); self.selectAll(); }; self.initWithTimeout = function () { self.initOptions(); self.selectAllWithTimeout(); }; self.initOptions = function () { self.available([]); self.available([ { name: "option 1", value: 1}, { name: "option 2", value: 2} ]); }; self.selectAll = function () { var $selector = $("#selector"); $selector.multiselect('selectAll', false); $selector.multiselect('updateButtonText'); }; self.selectAllWithTimeout = function () { setTimeout(self.selectAll, 1000); }; } var selectorVM = new selectorVM(); ko.applyBindings(selectorVM);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/> <div> <button class="btn btn-default" data-bind="click: init">Click to init dropdown, no timeout</button> <button class="btn btn-default" data-bind="click: initWithTimeout">Click to init dropdown, with timeout</button> </div> <div> <select id="selector" class="form-control" multiple="multiple" data-bind="options: available, optionsText: 'name', optionsValue: 'value', selectedOptions: selected, multiselect: { includeSelectAllOption: true }"> </select> </div>

Answer 1

您的问题在于代码执行顺序。 内置的 KO options绑定处理程序和 jQuery 多选插件都在修改 DOM，并且options处理程序可能在多选 function之后执行，因此当您构建多选菜单时，还没有任何选项可供选择。 当您使用setTimeout时，即使有 1ms 超时，function 也会被推送到调用堆栈的末尾，并将在当前事件循环完成时执行（有关更多详细信息，请参见此处），因此现在它在options绑定后执行完成的。 因此，它有效。

但是，这不是很漂亮。 在视图 model 中执行 DOM 操作绝不是一个好主意。 这就是为什么自定义绑定处理程序是一回事。 轻松与 DOM 元素交互并保持视图模型干净。 您的代码引用了multiselect绑定处理程序，但我在您的帖子中没有看到它。 如果我们创建它（它并不复杂），我们将看到我们可以使菜单按预期工作。 您最初的问题是您使用提供的绑定处理程序以及手动操作 DOM。 您应该坚持使用绑定处理程序，它会正常工作。 无需超时。

对于像 KO 这样的框架，作为一般经验法则，您应该始终只需要操作视图 model 中的数据。 KO 应该负责更新 UI 的繁重工作。 因此，如果您想要 select 所有项目，请考虑这是如何工作的：有一个名为selected的可观察数组，其中存储了所选项目的 ID。 因此，如果您想要 select 所有项目，您只需遍历所有可用项目，并将 ID 推送到所选数组。 KO 将负责为您更新 UI。 请参阅更新的代码片段。 我创建了一个单独的按钮来调用selectAll function，但如果你愿意，当然可以在你的 init function 中调用selectAll 。

 var selectorVM = function () { var self = this; self.available = ko.observableArray([]); self.selected = ko.observableArray([]); self.init = function () { self.initOptions(); }; self.initOptions = function () { self.available([ { name: "option 1", value: 1 }, { name: "option 2", value: 2 } ]); }; self.selectAll = function () { self.available().forEach(function (opt) { if (self.selected.indexOf(opt.value) === -1) { self.selected.push(opt.value); } }); } } var selectorVM = new selectorVM(); ko.applyBindings(selectorVM);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/> <div> <button class="btn btn-default" data-bind="click: init">Click to init dropdown, no timeout</button> <button class="btn btn-default" data-bind="click: selectAll">Select all</button> </div> <div> <select id="selector" class="form-control" multiple="multiple" data-bind="options: available, optionsText: 'name', optionsValue: 'value', selectedOptions: selected, multiselect: { includeSelectAllOption: true }"> </select> </div> <p>Selected options in observable array:</p> <ul data-bind="foreach: selected"><li data-bind="text: $data"></li></ul>