JQuery плагин не прилагая тело плагина кода для каждого элемента

Question

Я делаю свой первый файл загрузчик JQuery плагин (в CoffeeScript):

$.fn.uploadable = (opts={}) -> 
     console.log $(@).attr('type') # undefined 
     event = if $(@).attr('type') is 'file' then 'change' else 'drop' 
     @ 
     .on event, (evt) -> 
     # do something 
     off 
     .on 'dragover', (evt) -> off 


    $('#files_input, #drop_zone').uploadable 

Таким образом, вы можете видеть, в первую .on(), я я определяю, является ли элемент события кнопкой файла обзора или нет, если ДА, то этот элемент будет прослушиваться для события «изменения», когда пользователь выбирает файл, если нет, то я предполагаю, что это какой-то простой старый div или что-то еще для действия перетаскивания HTML5.

Поэтому я использую плагин на одном элементе INPUT и одном элементе DIV. Как вы можете видеть из моего console.log logged 'undefined'

До сих пор я знаю только этот метод вызова, такой как attr(), вы получите результат только от одного из перечисленных элементов селекторов. Но мне нужно установить переменную события .on (event) для каждого из согласованного элемента. Как я могу это сделать?

Спасибо

Answer 1

Обычный шаблон плагин выглядит следующим образом:

$.fn.plugin = function(options) { 
    options = $.extend({ }, $.fn.plugin.defaults, options || { }); 
    return this.each(function() { 
     // Do things to $(this) to set up your plugin. 
    }); 
}; 
$.fn.plugin.defaults = { ... }; 

версия CoffeeScript будет:

$.fn.plugin = (options = { }) -> 
    options = $.extend({ }, $.fn.plugin.defaults, options) 
    @.each -> 
     # Do things to $(@) to set up your plugin 
$.fn.plugin.defaults = { ... } 

return часть return this.each является то, что дает обычный цепочка, часть this.each - это то, что позволяет плагину сразу связываться с несколькими вещами.

Применяя это ваш случай даст вам:

$.fn.uploadable = (opts = { }) -> 
    @.each -> 
    event = if $(@).attr('type') is 'file' then 'change' else 'drop' 
    $(@) 
     .on event, (evt) -> 
     # do something 
     off 
     .on 'dragover', (evt) -> off