1

タグを表示するために、 bootstrap-tokenfieldとtypeheadでノックアウトを使用しています。以前は、タグを適切な方法で表示する方法が必要だったので、カスタム バインディングを作成しました。タグのリストが変更されておらず、選択されたタグのみが変更されている場合は、非常にうまく機能しました。

したがって、非常に単純化された例は次のようになります。ご覧のとおり、さまざまなタグ ( tag1、tag2、 ...、tag5) を入力でき、オブザーバブルが変化しています。したがって、この場合、カスタム バインディングが機能します。

ここにあります：

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);
    }
};

しかし問題は、追加のタグを追加する必要があることtag6です。

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

動作しません (これは私にとって驚くべきことではありません。動作しない理由はわかっています)。これを行う適切な方法は何ですか。

PS

  • 私の拘束力がひどいと思われる場合は、私はあなたに同意し、それを改善する方法を喜んで聞きます.

  • バインディングの仕組みについて説明が必要な場合は、喜んで提供いたします。

  • 持っtags1, tags1List, tags1Invertedているという考えは、IDまたは名前で適切なタグをすばやく見つけることができるようにすることです（私は500個ほど持っています）。

  • 多くのことを変更したい場合は、大歓迎です

4

2 に答える 2