bootstrap select 的淘汰自定义绑定未更新视图模型 "selectedCategories/selectedCategory"

Question

我正在创建一个 knockout js 自定义绑定，它将允许我使用 bootstrap multiselect. I need it to work for single <select>'s and also multiselects <select multiple="true">. I am doing it in this jsfiddle

的数据绑定

我知道了，因此单选和多选都可以显示下拉选项，并且随着按钮添加新类别，它们会显示在多选下拉列表中。我还想更新 viewmodels selectedItems，对于单选 <select> 是 _selectedCategory，对于多选是 '_selectedCategories'。

我在 jsfiddle 中添加了一些按钮来测试 bootstrap 多选元素。

如何在从下拉列表中选择 DOM 元素后更新视图模型 _selectedCategories 和 _selectedCategory？

代码在jsfiddle

Answer 1

我不确定我能否让您明白它是否有效，但有一些建议：

DOM 操作属于绑定处理程序。特别是，初始化：$(this).multiselect({ 进入 init.
您传递给该初始化的参数对象应该是您的 multiselect 绑定的绑定变量。（我不知道 _categoryID 是干什么用的。）这将是导致 update 触发的原因。这将是 valueAccessor() returns.
虽然 optionsText 和 optionsValue 应该有简单的字符串参数，但 value 的参数应该是一个不带引号的可观察名称。这是您提出的问题中的一个关键问题。
仅包装（直接调用 ko.bindingHandlers 条目）您未单独绑定的处理程序，并且仅当您需要将它们的绑定作为您正在执行的操作的一部分时。您可能需要将 options、optionsText 和 optionsValue 换行，而不是将它们包含在 data-bind 中。但是一个或另一个。

Update 我已经 updated your fiddle 处理了 multiselect 的情况。我没有发现 selectedOptions 绑定处理程序对我有用，所以我不得不把它放在 init 中。这打破了 single-select 的情况；需要对其进行特殊处理。

  $(element).change(function (e) {
    var selectedOptions = ko.utils.arrayFilter(Array.from(e.target.options), function (opt) {
      return opt.selected;
    });
    var selectedValues = ko.utils.arrayMap(selectedOptions, function (opt) {
      return opt.value;
    });
    valueAccessor()(selectedValues);
  });

bootstrap select 的淘汰自定义绑定未更新视图模型 "selectedCategories/selectedCategory"

Knockout custom binding for bootstrap select not updating viewmodel "selectedCategories/selectedCategory"

javascript

custom-binding

knockout.js

bootstrap-multiselect