custom_bindings/bsTagsinput.js

/**
 * Bootstrap tagsInput custom binding, mainly used for the repeatable tags selection
 * @module app/custom_bindings/bsTagsinput
 * @requries knockout
 * @requries jquery
 * @requries bootstrap-tagsinput
 * @requries typeahead
 * @requries bloodhound
 */
define(['knockout', 'jquery', 'bootstrap-tagsinput', 'typeahead', 'bloodhound'], function(ko, $, bsTagsinput, typeahead, Bloodhound) {

    ko.bindingHandlers.tagsinput = {
        init: function(el, valueAccessor, allBindings) {
            var valAccessor = valueAccessor(),
                $el = $(el);

            var tags = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('tag_name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: {
                    url: 'http://localhost/form-editor-dev/public/repeatable-tags'
                }
            });
            tags.initialize();

            /**
             * Typeahead
             */
            $el.tagsinput({
                tagClass: 'label label-primary',
                typeaheadjs: {
                    name: 'tags',
                    displayKey: 'tag_name',
                    valueKey: 'tag_name',
                    source: tags.ttAdapter()
                },
                freeInput: false
            });


            ko.utils.arrayForEach(valAccessor(), function(item) {
                $el.tagsinput('add', item);
            });


            $el.on('keypress', function(e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                }
            });

            $el.on('itemAdded', function(e) {
                valAccessor.push(e.item)
            });

            $('.bootstrap-tagsinput').addClass('bg-cream');

            // ko.utils.domeNodeDisposal.addDisposeCallback(el, function() {
            // $el.tagsinput('destroy');
            // });


        },
        update: function(el, valueAccessor, allBindings) {

            // ko.bindingHandlers.value.update(el, valueAccessor, allBindings);
        }
    };
});