vendredi 17 juin 2016

With binding and knockout selectpicker

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>&nbsp;<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>&nbsp;<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>&nbsp;<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