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

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

我正在创建一个 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

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

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