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
我不确定我能否让您明白它是否有效,但有一些建议:
- 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);
});
我正在创建一个 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
我不确定我能否让您明白它是否有效,但有一些建议:
- 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);
});