javascript - 引导选择的 knockout 自定义绑定(bind)不更新 View 模型 "selectedCategories/selectedCategory"

Question

我正在创建一个 knockout js 自定义绑定(bind)，它将允许我将数据绑定(bind)与 bootstrap multiselect 结合使用.我需要它为单例 <select> 工作的以及多选 <select multiple="true"> .我正在做这个 jsfiddle

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

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

如何查看模型 _selectedCategories和 _selectedCategory从下拉列表中选择 DOM 元素后会更新吗？

代码在jsfiddle

Answer 1

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

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

更新 我已经updated your fiddle处理多选情况。我没有发现 selectedOptions 绑定(bind)处理程序对我有用，所以我不得不把它放在 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);
  });