JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2-bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
select a: <select name="tag" id="tag" style="width:400px" multiple="multiple" data-bind="options:values, optionsValue:'id',optionsText:'name', selectedOptions:selected,valueAllowUnset: false, select2:{}"></select>
<br>


<pre data-bind="text: ko.toJSON($root.values, null, 2)"></pre>
<pre data-bind="text: ko.toJSON($root.selected, null, 2)"></pre>

JavaScript

ko.bindingHandlers.select2 = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var obj = valueAccessor(),
            allBindings = allBindingsAccessor(),
            lookupKey = allBindings.lookupKey,
            value = ko.utils.unwrapObservable(allBindings.value);
           
        $(element).select2(obj);
        if (lookupKey) {
            
            $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) {
                return item[lookupKey] === value;
            }));
        }
        if(allBindings.value){  // FIX no initial values   
            allBindings.value.subscribe(function (v) {
                $(element).trigger('change');
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).select2('destroy');
        });
    },
    update: function(element,valueAccessor,allBindingsAccessor) {
        
        //$(element).val(ko.utils.unwrapObservable(valueAccessor()));
        //$(element).trigger('change');
        
        var allBindings = allBindingsAccessor(),
            value = ko.utils.unwrapObservable(allBindings.value || allBindings.selectedOptions);
        if (value) {
            $(element).select2('val', value);
        }
    }
};


function ViewModel() {
    var self = this, current;
    
    self.values = ko.observableArray([]);    
    self.selected = ko.observableArray([]);
        
    setTimeout(function(){ getValues(); }, 0);
    
    function getValues() {
        var vals = [
            {id:1, name:"red"},
            {id:2, name:"grey"},
            {id:3, name:"blue"},
            {id:4, name:"pink"},
            {id:5, name:"purple"}
        ];
        self.values(vals);
        self.selected([2,3]);
    }
    
}

ko.applyBindings(new ViewModel());