JSFiddle - React, Tailwind, and code Playground

by xtranophilist

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css">
<select data-bind="selectize: items, value: item_id, object: item">
</select>

JavaScript

var inject_binding = function (allBindings, key, value){
	//https://github.com/knockout/knockout/pull/932#issuecomment-26547528
	return {
		has: function (bindingKey) {
			return (bindingKey == key) || allBindings.has(bindingKey);
		},
		get: function (bindingKey) {
			var binding = allBindings.get(bindingKey);
			if (bindingKey == key) {
				binding = binding ? [].concat(binding, value) : value;
			}
			return binding;
		}
	};	
}

ko.bindingHandlers.selectize = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        if (!allBindingsAccessor.has('optionsText'))
            allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsText', 'name');
        if (!allBindingsAccessor.has('optionsValue'))
            allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsValue', 'id');
        if (typeof allBindingsAccessor.get('optionsCaption') == 'undefined')
            allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsCaption', 'Choose...');

        ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

        var options = {
            valueField: allBindingsAccessor.get('optionsValue'),
            labelField: allBindingsAccessor.get('optionsText'),
            searchField: allBindingsAccessor.get('optionsText')
        }

        var $select = $(element).selectize(options)[0].selectize;
        $select.addItem(allBindingsAccessor.get('value')());

        if (typeof init_selectize == 'function') {
            init_selectize($select);
        }

        valueAccessor().subscribe(function (new_value) {
            var new_obj = new_value[new_value.length - 1];
            $select.addOption(new_obj);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        if (allBindingsAccessor.has('object')) {
            var value_accessor = valueAccessor();
            var selected_obj =...