Плагин jQuery: общедоступные функции?

Question

Я изменяю плагин jQuery.

Плагин представляет собой систему тегов с автозаполнением на основе автозаполнения jQuery ui.

В настоящее время, похоже, нет способа (кроме анализа созданных элементов списка) выяснить, какие теги были выбраны.

Я изменил плагин так, чтобы он управлял массивом, называемым тегами, который содержит список.

Однако теперь мне нужен способ добраться до массива.

чтобы инициализировать его, вы звоните

$('#id').tagit({availableTags: 'tags.php'});

То, что я хочу сделать, это назвать что-то вроде

$('#id').tagit('tags'); или $('#id').tagit().tags();

чтобы получить список тегов.

Как бы я изменил этот код, чтобы добавить эту функциональность?

(function($) {

    $.fn.tagit = function(options) {

        var tags = [];

        var defaults = {
            availableTags: [],
            allowSpace:    false
        };

        var options = $.extend(defaults, options);

        var el = this;

        const BACKSPACE = 8;
        const ENTER = 13;
        const SPACE = 32;
        const COMMA = 44;

        // add the tagit CSS class.
        el.addClass("tagit");

        // create the input field.
        var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
        el.html(html_input_field);

        tag_input = el.children(".tagit-new").children(".tagit-input");

        $(this).click(function(e) {
            if (e.target.tagName == 'A') {
                // Removes a tag when the little 'x' is clicked.
                // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
                $(e.target).parent().remove();
            }
            else {
                // Sets the focus() to the input field, if the user clicks anywhere inside the UL.
                // This is needed because the input field needs to be of a small size.
                tag_input.focus();
            }
        });

        tag_input.keydown(function(event) {
            if (event.which == BACKSPACE) {
                if (tag_input.val() == "") {
                    // When backspace is pressed, the last tag is deleted.
                    tags.pop();
                    $(el).children(".tagit-choice:last").remove();
                }
            }
            // Comma/Space/Enter are all valid delimiters for new tags.
            else if (event.which == COMMA || (event.which == SPACE && !options.allowSpace) || event.which == ENTER) {
                event.preventDefault();

                var typed = tag_input.val();
                typed = typed.replace(/,+$/, "");
                typed = typed.trim();

                if (typed != "") {
                    if (is_new(typed)) {
                        create_choice(typed);
                    }
                    // Cleaning the input.
                    tag_input.val("");
                }
            }
        });

        tag_input.autocomplete({
            source: options.availableTags,
            select: function(event, ui) {
                if (is_new(ui.item.value)) {
                    create_choice(ui.item.value);
                }
                // Cleaning the input.
                tag_input.val("");

                // Preventing the tag input to be update with the chosen value.
                return false;
            }
        });

        function is_new(value) {
            if (value in oc(tags))
                return false;
            return true;
        }

        function create_choice(value) {
            var el = "";
            el = "<li class=\"tagit-choice\">\n";
            el += value + "\n";
            el += "<a class=\"tagit-close\">x</a>\n";
            el += "<input type=\"hidden\" style=\"display:none;\" value=\"" + value + "\" name=\"item[tags][]\">\n";
            el += "</li>\n";
            var li_search_tags = this.tag_input.parent();
            $(el).insertBefore(li_search_tags);
            this.tag_input.val("");
            tags.push(value);
        }

        function oc(a) {
            var o = {};
            for (var i = 0; i < a.length; i++) {
                o[a[i]] = '';
            }
            return o;
        }
    };

    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, "");
    };

})(jQuery);

Answer 1

Наименее навязчивый способ - просто прикрепить tags как данные к элементу:

// Inside the plugin
var tags = [];
this.data('tagit-tags', tags);

Затем использовать его:

// Initialise, as you had before
$('#id').tagit({availableTags: 'tags.php'});
// Get tags
var tags = $('#id').data('tagit-tags');

Answer 2

Немного больше усилий, но попробуйте собрать плагин в пользовательском интерфейсе jQuery - он будет поддерживать состояние отдельных компонентов, предоставляет открытые методы после создания и публикует события. Это довольно легко использовать:

http://jqueryui.com/docs/Developer_Guide

Ваш код получения будет выглядеть примерно так:

$('#id').tagit("getTags");

Answer 3

не уверен, сработает ли это, но вы можете попробовать это в $.fn.tagit:

el.tags = function () {
    return tags;
}

, который затем должен вернуть массив tags.