Comment utiliser tagit avec knockout

Question

J'utilise http://aehlke.github.com/tag-it/ dans mon code comment lier avec viewmodel

html

<ul data-bind='jqueryui: "tagit",foreach: Tags' >
            <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all" data-bind='with: $data'>
                <span class="tagit-label" data-bind='text: $data'></span>
                <a class="tagit-close">
                    <span class="text-icon">&times;</span>
                    <span class="ui-icon ui-icon-close"></span>
                </a>
                <input type="hidden" name="item[tags][]" data-bind='value: $data'  style="display: none;">
            </li>
            </ul>

Code Js

function AppViewModel() {
var self = this;

function Tag(data) {
            this.Name = data;
        }

self.Tags = ko.observableArray([
            new Tag('red'),
            new Tag('blue'),
            new Tag('green')
        ]);
 }

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Merci d'avance pour votre aide !

Answer 1

Voici un autre gestionnaire de liaison pour knockout basé sur la réponse de Robert Wagner, puisque je ne le trouvais pas assez dynamique :

ko.bindingHandlers.tagit = {
//https://github.com/aehlke/tag-it
init: function (element, valueAccessor, allBindingsAccessor) {
    var bind = function () {
        valueAccessor().tags($(element).tagit("assignedTags"));
    };

    var options = $.extend({
        allowSpaces: false,
        caseSensitive: false,
        showAutocompleteOnFocus: true,
        afterTagAdded: function(t,s) { bind(); },
        afterTagRemoved: function(t,s) { bind(); },
        placeholderText: "",
        preprocessTag: function () { },
        beforeTagAdded: function (evt, tag) {
            if (tag.tagLabel.length == 0 || tag.tagLabel.toLowerCase() === options.placeholderText.toLowerCase()) {
                return false;
            }
            return true;
        }
    }, 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) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var tags = value.tags();
    $(element).tagit("removeAll");
    for (var x = 0; x < tags.length; x++) {
        $(element).tagit("createTag", tags[x]);
    }
}
};

Mes fonctions de prétraitement et d'autocomplétion :

self.TagAutocompleter = function (d, ds) {
    DataMethod.postData("tag/autocomplete", d, function (data) {
        ds(ko.utils.arrayMap(data, function (t) { return t.Tag; }));
    });
};

self.TagProcessor = function (tag) {
    return tag.toLowerCase().replace("#", '');
};

Et utiliser en html :

<ul data-bind="tagit:{tags:Tags, autocomplete:{source:TagAutocompleter, delay:250, minLength: 2}, options:{preprocessTag: TagProcessor}}">
</ul>

Answer 2

Voici une fixation personnalisée https://gist.github.com/droyad/6136446

ko.bindingHandlers.tags = {
    init: function (element, valueAccessor, allBindingsAccessor) {

        var bind = function() {
            var observable = valueAccessor();
            observable($(element).tagit("assignedTags").join(','));
        };

        var options = {
            allowSpaces: true,
            caseSensitive: false,
            showAutocompleteOnFocus: true,
            afterTagAdded: bind,
            afterTagRemoved: bind
        };

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

        $(element).tagit(options);
        $(element).data('uiTagit').tagInput.css("width", "50px");
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var tags = value.split(',');
        $(element).tagit("removeAll");
        for (var x = 0; x < tags.length; x++) {
            $(element).tagit("createTag", tags[x]);
        }
    }
}

Answer 3

J'écris un violon simple où c'est du travail. C'est un composant de construction avec une liste de tags. Violon

Mais ce n'est pas une liaison à double sens. Si vous voulez faire cela, je vous conseille de créer un binder personnalisé où il appelle le foreach model binder du knockout. Voir les informations sur les classeurs de modèles personnalisés

Dans la fonction init, vous devez vous abonner aux changements de balises dans knockout observableArray pour mettre à jour le contrôle. Et vous devez souscrire aux événements onTagAdded et onTagRemoved.

Il y a un exemple de code où j'ai étendu le composant foreach :

ko.bindingHandlers.extendForeach = {
    makeForeachValueAccessor: function (valueAccessor) {
         return function () {

            if ((!bindingValue) || typeof bindingValue.length == "number"){
                bindingValue = {
                    data : bindingValue
                }
            }

            return {
                'data': bindingValue['data'],
                'afterAdd': bindingValue['afterAdd'],
                'beforeRemove': bindingValue['beforeRemove'],
                'afterRender': bindingValue['afterRender'],
            };
        };
    },

    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var newValAccess = ko.bindingHandlers.extendForeach.makeForeachValueAccessor(valueAccessor);
        return ko.bindingHandlers.foreach.init(element, newValAccess, allBindingsAccessor, viewModel, bindingContext);
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var newValAccess = ko.bindingHandlers.extendForeach.makeForeachValueAccessor(valueAccessor);
        return ko.bindingHandlers.foreach.update(element, newValAccess, allBindingsAccessor, viewModel, bindingContext);
    }
}

J'espère que cela vous aidera.

Answer 4

Merci Cedric pas besoin d'écrire un classeur personnalisé

Je résous ce problème de cette façon lien

$("#mytags").tagit({
 availableTags: JSON.parse(ko.toJSON(_.pluck(AppViewModel.Tags, 'Name'))),
 onTagAdded: function (event, tagval) {
                    //on every add add with id if tag exist in system
                    var newtag = $(tagval).children('span.tagit-label').html();
                    var temp = _.find(AppViewModel.Tags, function (item) { return item.Name() == newtag; });
                    if (temp) {
                            AppViewModel().SelectedTags.push( Tag({ 'Id': temp.Id(), "Name": newtag} ));
                    }
                    else {
                            AppViewModel().SelectedTags.push( Tag({ "Name": newtag} ));
                    }

                },
onTagRemoved: function (event, tagval) {
                    // do something special
                    var tempTag = $(tagval).children('span.tagit-label').html();
                    AppViewModel().SelectedTags.remove(_.find(SelectedTags(), function (item) { return item.Name == tempTag; }));
                }});