Binding select2 with knockout

Question

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);
   });
})

The official github wiki has good pointers now (for select2 4.x as well as 3.x) - https://github.com/select2/select2/wiki/Knockout.js-Integration — shad0w_wa1k3r, Apr 27 '18 at 13:09

score 16 · Accepted Answer · edited Jun 20 '20 at 09:12

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)

Hakan Fıstık · Answer 2 · 2018-03-11T08:11:28.243

According to this example of select2 wiki on github, they provided Knockout binding handler and it worked for me.

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);
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();

        if ("value" in allBindings) {
            if ((allBindings.select2.multiple || el.multiple) && allBindings.value().constructor != Array) {
                $(el).val(allBindings.value().split(',')).trigger('change');
            }
            else {
                $(el).val(allBindings.value()).trigger('change');
            }
        } else if ("selectedOptions" in allBindings) {
            var converted = [];
            var textAccessor = function (value) { return value; };
            if ("optionsText" in allBindings) {
                textAccessor = function (value) {
                    var valueAccessor = function (item) { return item; }
                    if ("optionsValue" in allBindings) {
                        valueAccessor = function (item) { return item[allBindings.optionsValue]; }
                    }
                    var items = $.grep(allBindings.options(), function (e) { return valueAccessor(e) == value });
                    if (items.length == 0 || items.length > 1) {
                        return "UNKNOWN";
                    }
                    return items[0][allBindings.optionsText];
                }
            }
            $.each(allBindings.selectedOptions(), function (key, value) {
                converted.push({ id: value, text: textAccessor(value) });
            });
            $(el).select2("data", converted);
        }
        $(el).trigger("change");
    }
};

Actually, this is the original version which they provide, but I had to change one line to make it select the already selected options.

I replaced this line

$(el).select2("data", converted);

with

$(el).val(converted);

I think this was because of some difference in the select2 versions.
You can try both solutions and see what is suitable for you.

The Html was the as following

 <select data-bind="selectedOptions: SelectedTags, options: AllTags,  valueAllowUnset: true, optionsText:'Text', optionsValue: 'Value', 
         select2:{ placeholder: 'select tag', allowClear: true, multiple:'multiple'}" multiple></select>

Update For select2 Version 4 the previous solution is working for the version of select2 below version 4. For Select2 version 4 I have founded some other binding handler here it is

Binding select2 with knockout

2 Answers2

Thanks to:

Linked