I dont think i can paste the entire code here, however i just want to know why when i am using my 'selectpicker binding' in a knockout 'with' binding that constntly changes, the multiselects do not work and produce faulty html.I cant really make a jsfiddle of that.Are there any consideration when working with the with binding in knockout? thx
Here is what html produces
<div class="btn-group bootstrap-select show-tick form-control">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Selecteer" aria-expanded="false"><span class="filter-option pull-left">Selecteer</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu"></ul>
</div>
<div class="btn-group bootstrap-select show-tick form-control">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Selecteer"><span class="filter-option pull-left">Selecteer</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
<li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">MultipleNoCustom1st</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">MultipleNoCustom2nd</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select class="selectpicker form-control" multiple="multiple" data-none-selected-text="Selecteer" data-bind="selectPicker: SelectedAnswers, optionsText: 'Name', optionsValue: 'Id', selectPickerOptions: { optionsArray: Answers }" tabindex="-98">
<option value="59">MultipleNoCustom1st</option>
<option value="60">MultipleNoCustom2nd</option>
</select>
</div>
</div>
this is the wrong generated html.
The following is the correct html
<div class="btn-group bootstrap-select show-tick form-control">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="multipleyes2nd"><span class="filter-option pull-left">multipleyes2nd</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
<li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">multipleyes2nd</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">multipleyes1st</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">ShowInfoOption</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select class="selectpicker form-control" multiple="multiple" data-none-selected-text="Selecteer" data-bind="selectPicker: SelectedAnswers, optionsText: 'Name', optionsValue: 'Id', selectPickerOptions: { optionsArray: Answers }" tabindex="-98">
<option value="56">multipleyes2nd</option>
<option value="57">multipleyes1st</option>
<option value="58">ShowInfoOption</option>
</select>
</div>
here is the binding
ko.bindingHandlers.selectPicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
if ($(element).is('select')) {
if (ko.isObservable(valueAccessor())) {
if ($(element).prop('multiple') && $.isArray(ko.utils.unwrapObservable(valueAccessor()))) {
// in the case of a multiple select where the valueAccessor() is an observableArray, call the default Knockout selectedOptions binding
ko.bindingHandlers.selectedOptions.init(element, valueAccessor, allBindingsAccessor);
} else {
// regular select and observable so call the default value binding
ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
}
}
$(element).addClass('selectpicker').selectpicker();
}
},
update: function (element, valueAccessor, allBindingsAccessor) {
if ($(element).is('select')) {
var selectPickerOptions = allBindingsAccessor().selectPickerOptions;
if (typeof selectPickerOptions !== 'undefined' && selectPickerOptions !== null) {
var options = selectPickerOptions.optionsArray,
optionsText = selectPickerOptions.optionsText,
optionsValue = selectPickerOptions.optionsValue,
optionsCaption = selectPickerOptions.optionsCaption,
isDisabled = selectPickerOptions.disabledCondition || false,
resetOnDisabled = selectPickerOptions.resetOnDisabled || false;
if (ko.utils.unwrapObservable(options).length > 0) {
// call the default Knockout options binding
ko.bindingHandlers.options.update(element, options, allBindingsAccessor);
}
if (isDisabled && resetOnDisabled) {
// the dropdown is disabled and we need to reset it to its first option
$(element).selectpicker('val', $(element).children('option:first').val());
}
$(element).prop('disabled', isDisabled);
}
if (ko.isObservable(valueAccessor())) {
if ($(element).prop('multiple') && $.isArray(ko.utils.unwrapObservable(valueAccessor()))) {
// in the case of a multiple select where the valueAccessor() is an observableArray, call the default Knockout selectedOptions binding
ko.bindingHandlers.selectedOptions.update(element, valueAccessor);
} else {
// call the default Knockout value binding
ko.bindingHandlers.value.update(element, valueAccessor);
}
}
$(element).selectpicker('deselectAll');
$(element).selectpicker('render');
$(element).selectpicker('refresh');
}
}
};
Aucun commentaire:
Enregistrer un commentaire