Add new tags in custom binding

Question

I am using knockout with bootstrap-tokenfield and typeahead to show tags. Previously I needed a way to show my tags in a nice way and therefore I created a custom binding. It worked really nice when the list of tags was not changing and only selected tags were changing.

So a really simplified example looks like this. As you see, you can type various tags (tag1, tag2, ..., tag5) and observable is changing. So my custom binding works in this case.

Here it is:

ko.bindingHandlers.tags = {
    init: function(element, valueAccessor, allBindings) {
        var initializeTags = function(listOfTags, inputID, max){
            var tags = new Bloodhound({
                local: listOfTags,
                datumTokenizer: function(d) {return Bloodhound.tokenizers.whitespace(d.value);},
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });
            tags.initialize();
            inputID.tokenfield({
                limit : max,
                typeahead: {source: tags.ttAdapter()}
            }).on('tokenfield:preparetoken', function (e) {
                var str = e.token.value,
                    flag = false,
                    i, l;
                for(i = 0, l = listOfTags.length; i < l; i++){
                    if (listOfTags[i]['value'] === str){
                        flag = true;
                        break;
                    }
                }

                if (!flag){
                    e.token = false;
                }
            });
        }

        var options = allBindings().tagsOptions,
            currentTagsList = Helper.tags1List,
            currentTagsInverted = Helper.tags1Inverted;

        initializeTags(currentTagsList, $(element), 4);

        ko.utils.registerEventHandler(element, "change", function () {
            var tags = $(element).tokenfield('getTokens'),
                tagsID = [],
                observable = valueAccessor(), i, l, tagID;

            for (i = 0, l = tags.length, tagID; i < l; i++){
                tagID = currentTagsInverted[tags[i].value];

                if (typeof tagID !== 'undefined'){
                    tagsID.push(parseInt(tagID));
                }
            }

            observable( tagsID );
        });
    },
    update: function(element, valueAccessor, allBindings) {
        var arr     = ko.utils.unwrapObservable(valueAccessor()),
            options = allBindings().tagsOptions,
            currentTags = Helper.tags1, tagsName = [], i, l, tagName;

        if ( !(arr instanceof Array) ){
            arr = [];
        }

        for (i = 0, l = arr.length, tagName; i < l; i++){
            tagName = currentTags[arr[i]];
            if (typeof tagName !== 'undefined'){
                tagsName.push(tagName);
            }

        }
        $(element).tokenfield('setTokens', tagsName);
    }
};

But the problem is that I need to add additional tag: tag6 and if I simply do

Helper.getAllTags({
    "1":{"value":"tag1"}, ..., "6":{"value":"tag6"}
})

it will not work (which is not a surprise to me, I know why it does not work). What it the proper way of doing this.

P.S.

• If you think that my binding is terrible, I agree with you and would be happy to hear how to improve it.

• If you need clarification about how binding work, I will be happy to provide it.

• Idea of having tags1, tags1List, tags1Inverted is to be able to quickly find appropriate tag either by id or by name (I have like 500 of them).

• if you want to change many things you are welcome

Answer 1

Updated answer, 'correct' pattern

I've created a KnockoutJS binding for bootstrap-tokenfield.

https://github.com/mryellow/knockoutjs-tokenfield

First up lets look at updates coming in from the valueAccessor().

update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var observable = valueAccessor() || { };
    var peeked = ko.unwrap(observable.peek());

    ko.tokenfield[element.id].handlerEnabled = false;

    $(element).tokenfield('setTokens',peeked);

    ko.tokenfield[element.id].handlerEnabled = true;
}

Here we create tokens for any incoming data from the model. All the tokens, as valueAccessor() gives us the complete object. This however will trigger tokenfield:createdtoken which is on the init side of our binding. So to avoid re-saving these tokens to the model we set a variable handlerEnabled to control the events flow.

Now for any user interaction, HTML value attributes, or model changes this event will be triggered:

ko.utils.registerEventHandler(element, 'tokenfield:createdtoken', function (e) {
    // Detect private token created.
    if (e.attrs[ko.tokenfield[element.id].bindings['KeyDisplay']].indexOf("_") === 0) {
        console.log('tt-private');
        $(e.relatedTarget).addClass('tt-private');
    }

    // Allow `update` to temporarily disable pushing back when this event fires.
    if (ko.tokenfield[element.id].handlerEnabled == true) observable.push(e.attrs);

});

Note the handlerEnabled global to block re-adding to the valueAccessor().

When removing tokens the extra meta-data that came from our AJAX autocomplete is missing from tokenfield (patched). Thus we must look it up based on the attributes that do exist:

ko.utils.registerEventHandler(element, 'tokenfield:removedtoken', function (e) {
    var peeked = observable.peek();
    var item;
    // Find item using tokenfield default values, other values are not in tokenfield meta-data.
    ko.utils.arrayForEach(peeked, function(x) {
        if (ko.unwrap(x.label) === e.attrs.label && ko.unwrap(x.value) === e.attrs.value) item = x;
    });

    observable.remove(item); // Validation of `item` likely needed
});

So that about covers the internals of the binder. Now we're saving everything directly into the bound model as KnockoutJS would expect, without the duplication of data or sync issues. Lets get that CSV field back, using a observableArray.fn which returns a computed is nice and reusable.

Usage: self.tags_csv = self.tags.computeCsv();.

ko.observableArray['fn'].computeCsv = function() {
    console.log('observableArray.computeCsv');
    var self = this;        

    return ko.computed({
        read: function () {
            console.log('computed.read');

            var csv = '';
            ko.utils.arrayForEach(ko.unwrap(self), function(item) {
                console.log('item:'+JSON.stringify(item));
                if (csv != '') csv += ',';
                // Our ID from AJAX response.
                if (item.id !== undefined) {
                    csv += item.id;
                // Tokenfield's ID form `value` attrs.
                } else if (item.value !== undefined) {
                    csv += item.value;
                // The label, no ID available.
                } else {
                    csv += item.label;
                }                   
            });

            return csv;
        },
        write: function (value) {
            console.log('computed.write');

            ko.utils.arrayForEach(value.split(','), function(item) {
                self.push({
                    label: item,
                    value: item
                });
            });

        }
    });
};

Now we have an array of objects and a CSV representation in our model, ready to be mapped or manipulated before sending to server.

"tags": [
    {
        "label": "tag1",
        "value": "tag1"
    },
    {
        "id": "id from AJAX",
        "field": "field from AJAX",
        "label": "tag2",
        "value": "tag2"
    }
],
"tags_csv": "tag1,id from AJAX"

Answer 2

This answer is backwards

Please refer to the other version.

---

Adding the addItem()/removeItem() to the model directly helps keep things a little more managable. Below is my model which contains the items associated with each field.

var tokenFieldModel = function tokenFieldModel() {
    var self = this;
    this.items = ko.observableArray([]);

    this.addItem = function(attrs) {
        console.log('addItem');
        self.items.push(new tokenItemModel(attrs));
    };

    this.removeItem = function(attrs) {
        console.log('removeItem');
        var item;
        if (attrs.id != null) {
            ko.utils.arrayForEach(this.items(), function(x) {
                if(x.id === attrs.id && ko.unwrap(x.value) == attrs.value) item = x;
            });
        } else {
            ko.utils.arrayForEach(this.items(), function(x) {
                // TODO: Use allBindingsAccessor().tokenFieldDisplay
                if(ko.unwrap(x.value) === attrs.value) item = x;
            });
        }
        //console.log(ko.unwrap(this.items()));
        self.items.remove(item);
    };
};

The removeItem() looks messy having to loop through things but is a bit particular to my situation, I want to add tokens that haven't been matched against the autocomplete and don't have id or any other object keys. They'll only have the text/label that created the token.

I can then sent this to the server looking something like:

field_id = "id:111, id:222, a new tag, id:333, another new tag"

or

field_id = [
    {
        id: 111,
        value: 'tag1',
        label: 'tag1'
    },
    {
        id: 222,
        value: 'tag2',
        label: 'tag2'
    },
    {
        value: 'a new tag'
    },
]

This then allows me to create tokens that aren't prefixed. I'm using Couchbase NoSQL so this fits right in with how data/documents are stored.

Thus removeItem() has to search through the array attempting to match either an id or falling back only looking for the value. This part could be improved to accept a binding variable from allBindingsAccessor() to control which field is matched.

Now inside the binder's init we can define eventHandlers that will respond to tokenfield.

ko.utils.registerEventHandler(element, 'tokenfield:removedtoken', function (e) {
    console.log('tokenfield:removedtoken');
    console.log(e);

    tokenBaseModel.fields[element.id].removeItem(e.attrs);
});

Note that I have each tokenfield on the page inside an array tokenBaseModel.fields() indexed by their elementId (not an obserableArray(), just a normal array to store separate items lists for each tokenfield on the page).

var tokenBaseModel = {
    fields: []
};

Then in the binders update section we can pass the value in our tokenfield back to other models as defined in the data-bind attribute itself.

update: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
    console.log('update');
    var observable = valueAccessor() || {};

    // Does validation on allBindingsAccessor and sets defaults.
    var bindings = new tokenFieldUtils().processBindings(allBindingsAccessor);

    // An `fn` util function extending both `observableArray` and `observable` to accept whichever datatype they're expecting and sort it out.
    observable.refreshAll(ko.unwrap(tokenBaseModel.fields[element.id].items),bindings['Delimiter'],bindings['FieldKey']);

}

Then finally my refreshAll() (actually valueAccessor()().refreshAll()) function does the heavy-lifting of passing the data back to the valueAccessor().

 ko.observableArray['fn'].refreshAll = function(valuesToPush, delimiter, key) {
    var underlyingArray = this();
    this.valueWillMutate();
    this.removeAll();
    ko.utils.arrayPushAll(underlyingArray, valuesToPush);
    this.valueHasMutated();
    return this;
};

ko.observable['fn'].refreshAll() = function(valuesToPush, delimiter, key) {
    this.valueWillMutate();
    var csv = '';
    ko.utils.arrayForEach(valuesToPush, function(item) {
        if (csv != '') csv += delimiter;
        if (item[key] === undefined) {
            csv += item['value'];
        } else {
            csv += item[key];
        }
    });
    this(csv);
    this.valueHasMutated();
    return this;
};

Defining the binding as data-bind="tokenfield: fooModel.bar" means valueAccessor() will be evaluated to the external field fooModel.bar which is outside the scope of my tokenfield models. (valueAccessor() is actual a function to get/set, not a link directly to the value).

Then finally hitting valueHasMutated() triggers the changes to update in other elements where fooModel.bar is bound.