具有Select2 inital值的Knockout.js
我将Select2与knockout.js结合使用。
但是控件没有正确显示初始值。看起来没有引发select函数
我修改了一个现有的jsbin以演示我的问题。
http://jsbin.com/xufovura/6/edit
约束：
<div data-bind="value: selectedState, select2: { data: states, placeholder: 'Select a State', formatResult: format ,initSelection: initSelect}" class="select2" style="width: 200px"></div>自定义绑定的一部分(jsbin中的完整代码)：
ko.bindingHandlers.select2 = {
init: function(el, valueAccessor, allBindingsAccessor, viewModel) {
ko.utils.domNodeDisposal.addDisposeCallback(el, function() {
$(el).select2('destroy');
});
var allBindings = allBindingsAccessor(),
select2 = ko.utils.unwrapObservable(allBindings.select2);
$(el).select2(select2);
}
};
function initSelect(element, callback) {
console.log("initSelect");
var selectedItems = $.grep(this.states, function (e) { return e.id == element.id; });
console.log(element);
callback(selectedItems[0]);
}回答 1
Stack Overflow用户
发布于 2014-06-11 22:31:00
没有调用initSelect函数的原因是Select2认为占位符被选中了。Select2读取$(element).val()，如果结果是falsey，则占位符被认为是被选中的。
div元素将始终返回val()结果的"“。
您应该将div元素切换到一个输入元素，但是当我在您的jsBin中这样做时，我发现输入的值没有被敲除初始化。这是值绑定的时间问题，因为在调用select2绑定的init函数时，尚未调用值绑定的更新函数。
敲除首先调用所有init函数，然后调用更新函数。
当不使用select元素时，Select2对Knockout不友好!！
一个快速而肮脏的解决方案是确保在调用select2插件之前设置元素的值。
init: function(el, valueAccessor, allBindingsAccessor, viewModel) {
ko.utils.domNodeDisposal.addDisposeCallback(el, function() {
$(el).select2('destroy');
});
var allBindings = allBindingsAccessor(),
select2 = ko.utils.unwrapObservable(allBindings.select2);
// Ensure the input's value is set before calling select2
$(el).val(allBindings.value());
$(el).select2(select2);
}您也不再需要initSelected选项了，而且实际上您在jsBin中的失败是因为$.grep(this.states, ...) "this“在这一点上没有引用视图模型。
您还需要注意，当迁移到Knockout 3.x时，allBindingsAccessor会发生变化。
更长、更完整的答案包括设置各种select2事件的处理程序，以及手动订阅支持值，以便在需要时从绑定的update方法协调对$(el).select2('data', ...)的手动调用。
如果将后备存储更改为对象而不是仅存储字符串值(即存储实际的“状态”对象，而不仅仅是id )，也需要这种方法。
https://stackoverflow.com/questions/24170009
复制相似问题
腾讯云开发者
