Как хранить дополнительные данные вместе с тегами Tag-it? - PullRequest
Новая
       28

Как хранить дополнительные данные вместе с тегами Tag-it?

3 голосов
/ 13 марта 2012

Мы используем Tag-it с вызовом Ajax в качестве tagSource для маркировки контента.Нам нужно включить больше данных, чем сама метка тега, например, идентификатор, отличный от метки или метаданных, таких как тип тега.Данные, которые возвращаются в вызов Ajax, но мы не хотели бы включать их в саму метку тега.

Мы могли бы изменить Tag-it для включения данных с li элементами, используя jQuery's .dataметод , но если кто-то уже решил это или может порекомендовать другую библиотеку тегов, это будет высоко оценено.

1 Ответ

3 голосов
/ 14 декабря 2012

Ключом к этому без изменения Tag-it является преодоление разрыва между дополнительными данными, возвращаемыми из вызова Ajax с автозаполнением, и событием Tag-it afterTagAdded.

Добавьте переменную itemData в область действия, которая будет использоваться для хранения дополнительных данных из элемента автозаполнения: 

{
    var itemData;

Получить ссылку на элемент тегов, чтобы можно было вызывать поведение создания тега 

    var theTags = $('#tags');

    theTags.tagit({

Обработайте событие select автозаполнения и сохраните дополнительные данные из выбранного элемента автозаполнения, затем создайте тег. 

        autocomplete: {
            source: [
                {value:'User Tag',data:{id: 1, type: 'userTag'}},
                {value:'System Tag',data:{id: 2, type: 'systemTag'}}
            ],
            select: function(event,ui) {
                itemData = ui.item.data;
                theTags.tagit("createTag", ui.item.value);
                return false;
            }
        },

Обработка события afterTagAdded для Tag-it. Здесь можно реализовать любое пользовательское поведение для изменения только что добавленного тега. 

        afterTagAdded: function(event, ui) {
            if (itemData) {
                $(ui.tag).data('type', itemData); // store all data
                $(ui.tag).find('input').val(itemData.id); // use a bit of the data
                itemData = null;
            }
        }
    });
}

См. Рабочий пример этого решения на http://jsfiddle.net/yuhxL/2/

...