引导程序选择的淘汰自定义绑定不更新视图模型“selectedCategories/selectedCategory”

Question

我正在创建一个淘汰赛 js 自定义绑定，它允许我使用 bootstrap multiselect 的数据绑定。我需要它来处理单个<select> 和多选<select multiple="true">。我在这个jsfiddle做这件事@

我已经得到它，这样单选和多选都可以显示下拉选项，并且随着按钮添加新类别，它们会显示在多选下拉列表中。我还想更新视图模型 selectedItems，它们是单个 <select> 的 _selectedCategory 和多选的 '_selectedCategories'。

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

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

代码在jsfiddle

Answer 1

我不确定我能否让您了解它的工作原理，但有一些建议：

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

更新我有updated your fiddle 来处理多选情况。我没有发现selectedOptions 绑定处理程序对我有用，所以我不得不把它放在init 中。这打破了单选情况；需要对其进行特殊处理。

  $(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);
  });