JSFiddle - React, Tailwind, and code Playground

by Antonin Loury

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/tag-it/2.0/css/jquery.tagit.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/tag-it/2.0/css/tagit.ui-zendesk.css">
<script src="https://raw.githubusercontent.com/aehlke/tag-it/master/js/tag-it.min.js"></script>
Sans Knockout
<ul id="myTags">
    <!-- Existing list items will be pre-added to the tags -->
    <li>Tag1</li>
    <li>Tag2</li>
</ul>Avec Knockout
<span data-bind="text: ok"></span>

<ul data-bind="tagit:{tags:langues, autocomplete:{source:autocompleteLg, delay:0, minLength: 2}}"></ul>

<div>
<span data-bind="foreach: langues"></span>
</div>

JavaScript

ko.bindingHandlers.tagit = {
    init: function (element, valueAccessor, allBindingsAccessor) {
         console.log("In Init fn");
        console.log(valueAccessor());
        
        var bind = function () {
        valueAccessor().tags($(element).tagit("assignedTags"));
        };

        var options = $.extend({
            allowSpaces: false,
            caseSensitive: false,
            showAutocompleteOnFocus: true,
            afterTagAdded: function (t, s) {
                console.log("afterTagAdded triggered");
                //bind();
            },
            afterTagRemoved: function (t, s) {
                console.log("afterTagRemoved triggered");
                //bind();
            },
            /*select: function( event, ui ) {
                console.log("select triggered");
                console.log(ui);
            },*/
            preprocessTag: function (val) {
                 console.log("preprocessTag trigerred");
                console.log(val);
                return val;
            }
        }, valueAccessor().options || {});

        var tags = valueAccessor()["autocomplete"];
        if (tags) $.extend(options, {
            autocomplete: $.extend({
                source: tags.source,
                delay: 0,
                minLength: 0
            }, tags)
        });

        $(element).tagit(options);
    },
		update: function (element, valueAccessor) {
             console.log("In Update fn");
		    var value = ko.utils.unwrapObservable(valueAccessor());
            
            console.log(value);
             console.log(value.tags());
            var tags = value.tags();
		    $(element).tagit("removeAll");
		    for (var x = 0; x < tags.length; x++) {
                console.log(tags[x]);
		        $(element).tagit("createTag", tags[x]);
		    }
            
           console.log($(element).tagit('assignedTags'));
            console.log("End Update fn");
		}
};

var Vm = function () {
    var self = this;
  ...