将 select2 与淘汰赛绑定 [英] Binding select2 with knockout
问题描述
我是淘汰赛的新手,并试图让我的 select2 与淘汰赛绑定一起发挥出色.
我想要做的就是将帐户数组绑定到我的 select2(这有效)然后在绑定发生时设置初始值.由于某种原因,我无法使其正常工作.还注意到 init 和 update 函数最初被调用,但是无论何时我更改 select2 下拉列表的值,都不会触发更新函数.
任何帮助将不胜感激.
HTML
<fieldset class="form-group"><label data-bind="attr:{for:'job'+laborDetailId()}">工作</label><select class="select2" data-bind="attr:{id:'job'+laborDetailId()},updateaccountdropdown: {value:account(),data:accounts,width:'100%'}"></选择></fieldset>
JS
var accounts = [{"id":-1,"text":"","description":null}, {"id":25,"text":"J13002","description":null}, {"id":28,"text":"J13053","description":null}];var LaborListModel = 函数(laborModels){var self = this;//包含所有劳动模型self.labordetails = ko.observableArray(laborModels);self.selectedAccount = ko.observable();//绑定ko.bindingHandlers.updateaccountdropdown = {初始化:函数(元素,valueAccessor,allBindingsAccessor,viewModel,bindingContext){ko.utils.domNodeDisposal.addDisposeCallback(元素,函数(){$(element).select2('destroy');});var allBindings = allBindingsAccessor(),select2 = ko.utils.unwrapObservable(allBindings.updateaccountdropdown);$(元素).select2(select2);},更新:函数(元素,valueAccessor,allBindingsAccessor,viewModel,bindingContext){var allBindings = allBindingsAccessor();如果(allBindings 中的值"){var val = ko.utils.unwrapObservable(valueAccessor());$(element).val(val.id).trigger('change');}}};}getAllLaborDetails().done(function(result) {loadAccounts().done(function(_accounts) {账户 = _accounts;for (var i = 0; i < result.length; i++) {//劳动模式var labourDetails = [];labourDetails.push(new LaborModel(结果[i].labourDetailId,结果[i].帐户,结果[i].categoryModel,结果[i].描述,结果[i].timeStamp,结果[i].小时));}var vm = new LaborListModel(laborDetails);ko.applyBindings(vm);});})
希望这个select2"自定义绑定可帮助您:
ko.bindingHandlers.select2 = {之后:[选项",价值"],初始化:函数(el,valueAccessor,allBindingsAccessor,viewModel){$(el).select2(ko.unwrap(valueAccessor()));ko.utils.domNodeDisposal.addDisposeCallback(el, function () {$(el).select2('destroy');});},更新:函数(el,valueAccessor,allBindingsAccessor,viewModel){var allBindings = allBindingsAccessor();var select2 = $(el).data("select2");如果(allBindings 中的值"){var newValue = "" + ko.unwrap(allBindings.value);if ((allBindings.select2.multiple || el.multiple) && newValue.constructor !== Array) {select2.val([newValue.split(",")]);}别的 {select2.val([newValue]);}}}};$(document).ready(function(){var data = ko.observableArray([{id: 1, text: "A"}, {id: 2, text: "B"}]);var 值 = ko.observable();ko.applyBindings({data: data, value: value});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css"/><span>选择的值:</span><span data-bind="text: value"></span><div style="width: 350px; margin-top: 20px;"><选择样式="宽度:100%;"data-bind="value: value, valueAllowUnset: true, options: data, optionsText: 'text', optionsValue: 'id', select2: { placeholder: 'Select an option...', allowClear: true }"></选择>
感谢:
- Select2 团队 (https://github.com/select2/select2/issues/3116)
- Stackoverflow 社区(Select2 4.0.0 初始值与 Ajax, 敲除/选择2:触发select2 根据可观察的选项更新进行更新)
I'm new to knockout and trying to get my select2 to play nicely with my knockout bindings.
All I want to do is bind accounts array to my select2 (this works) and then have the initial value set when the binding occurs. I for some reason can not get this to work. Also noticed that the init and update function get called initially, but anytime I change the value of the select2 dropdown, the update function is not being triggered.
Any help would be appreciated.
HTML
<div class="col-sm-12 col-md-3">
<fieldset class="form-group">
<label data-bind="attr:{for:'job'+laborDetailId()}">Job</label>
<select class="select2" data-bind="attr:{id:'job'+laborDetailId()},updateaccountdropdown: {value:account(),data:accounts,width:'100%'}">
</select>
</fieldset>
</div>
JS
var accounts = [{"id":-1,"text":"","description":null}, {"id":25,"text":"J13002","description":null}, {"id":28,"text":"J13053","description":null}];
var LaborListModel = function(laborModels) {
var self = this;
//contains all labor models
self.labordetails = ko.observableArray(laborModels);
self.selectedAccount = ko.observable();
//bindings
ko.bindingHandlers.updateaccountdropdown = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).select2('destroy');
});
var allBindings = allBindingsAccessor(),
select2 = ko.utils.unwrapObservable(allBindings.updateaccountdropdown);
$(element).select2(select2);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var allBindings = allBindingsAccessor();
if ("value" in allBindings) {
var val = ko.utils.unwrapObservable(valueAccessor());
$(element).val(val.id).trigger('change');
}
}
};
}
getAllLaborDetails().done(function(result) {
loadAccounts().done(function(_accounts) {
accounts = _accounts;
for (var i = 0; i < result.length; i++) {
//LaborModel
var laborDetails = [];
laborDetails.push(new LaborModel(
result[i].labourDetailId,
result[i].account,
result[i].categoryModel,
result[i].description,
result[i].timeStamp,
result[i].hour
));
}
var vm = new LaborListModel(laborDetails);
ko.applyBindings(vm);
});
})
Hope this "select2" custom binding helps you:
ko.bindingHandlers.select2 = {
after: ["options", "value"],
init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
$(el).select2(ko.unwrap(valueAccessor()));
ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
$(el).select2('destroy');
});
},
update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
var allBindings = allBindingsAccessor();
var select2 = $(el).data("select2");
if ("value" in allBindings) {
var newValue = "" + ko.unwrap(allBindings.value);
if ((allBindings.select2.multiple || el.multiple) && newValue.constructor !== Array) {
select2.val([newValue.split(",")]);
}
else {
select2.val([newValue]);
}
}
}
};
$(document).ready(function(){
var data = ko.observableArray([{id: 1, text: "A"}, {id: 2, text: "B"}]);
var value = ko.observable();
ko.applyBindings({data: data, value: value});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" />
<span>Selected value: </span>
<span data-bind="text: value"></span>
<div style="width: 350px; margin-top: 20px;">
<select style="width: 100%;" data-bind="value: value, valueAllowUnset: true, options: data, optionsText: 'text', optionsValue: 'id', select2: { placeholder: 'Select an option...', allowClear: true }"></select>
</div>
Thanks to:
- Select2 Team (https://github.com/select2/select2/issues/3116)
- Stackoverflow Community (Select2 4.0.0 initial value with Ajax, Knockout/Select2: Triggering select2 to update based on an observable option updating)
这篇关于将 select2 与淘汰赛绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!