Плагин 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

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

http://jqueryui.com/docs/Developer_Guide

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

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

Answer 2

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

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

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

Answer 3

Наименее навязчивым способом является просто прикрепить 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');