这不起作用(调用自定义绑定(bind)但下拉列表为空)
<select id="parentArea" class="chosen-select" data-bind="
chosen:{},
options: parentAreas,
optionsCaption: 'Choose...',
optionsText: 'Label',
value: selectedParentArea">
</select>
但这行得通(下拉已填满)
<select id="parentArea" class="chosen-select" data-bind="
options: parentAreas,
optionsCaption: 'Choose...',
optionsText: 'Label',
value: selectedParentArea">
</select>
我想向下拉列表添加自定义绑定(bind),但不确定如何操作。
自定义绑定(bind)很简单
ko.bindingHandlers.chosen = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
console.log('chosen', element);
$(element).chosen({});
}
};
更新
.chosen({});
是来自另一段 Javascript (harvesthq.github.io/chosen) 的方法。
我意识到,当它被注释掉时,剩下的绑定(bind)工作。 我真正需要的是运行“$(element).chosen ({});”在所有其他绑定(bind)完成之后。
更新 2
当我在应用所有绑定(bind)后手动应用“选择”时,效果很好。例如,我可以使用运行此 JS 的按钮
function run() {
$('.chosen-select').chosen({});
};
我只需要在所有绑定(bind)完成后自动执行(回调函数?)。 我不知道该怎么做。
更新 3
“parentAreas”不是静态数组。它是从网络服务加载的:
function ViewModel() {
var self = this;
self.init = function () {
//load parent areas from web service
};
self.init(); //Running the init code
}
ko.applyBindings( new ViewModel());
我想在父区域准备好时初始化“选择的”框自定义绑定(bind)。
更新 4
新版本(可用但不可重用,因为它具有硬编码绑定(bind))
ko.bindingHandlers.chosen = { 初始化:函数(元素、值访问器、allBindingsAccessor、 View 模型、上下文){
viewModel.parentAreas.subscribe(function(newParentAreas) {
if (newParentAreas && newParentAreas.length > 0) {
ko.applyBindingsToNode(element, {
options: viewModel.parentAreas,
optionsCaption: 'Choose...',
optionsText: 'Label',
value: viewModel.selectedParentArea
});
$(element).chosen({});
}
});
}
};
//绑定(bind)只是 data-bind="chosen:{}
更新 5 避免多重初始化(hacky 方式)
ko.bindingHandlers.parentAreaComboBox = {
initialised: false,
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
viewModel.parentAreas.subscribe(function (newParentAreas) {
if (newParentAreas && newParentAreas.length > 0) {
if (ko.bindingHandlers.parentAreaComboBox.initialised) {
return;
}
ko.applyBindingsToNode(element, {
options: viewModel.parentAreas,
optionsCaption: 'Choose...',
optionsText: 'Label',
value: viewModel.selectedParentArea
});
$(element).chosen({});
ko.bindingHandlers.parentAreaComboBox.initialised = true;
}
});
}
};
更新 6
我写了通用的解决方案(见下面我的回答)
最佳答案
这是一种依赖于绑定(bind)顺序的反模式。
如果您有一个自定义绑定(bind)需要其他绑定(bind)在其自身之前运行,您应该从自定义绑定(bind)中调用这些绑定(bind)
ko.applyBindingsToNode(element, { options: arr, value: val });
然后执行 $(element).chosen
关于knockout.js - knockout - 是否可以将标准选择绑定(bind)与自定义绑定(bind)结合起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19705310/