0

私は最初のファイル アップローダー 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() で、イベントの要素がファイル参照ボタンであるかどうかを判断しています。YES の場合、この要素は、ユーザーがファイルを選択したときに「変更」イベントをリッスンします。 、いいえの場合、それはHTML5のドラッグアンドドロップアクション用の単純な古いdivまたは何かであると想定します。

したがって、1 つの INPUT 要素と 1 つの DIV 要素でプラグインを使用しています。私のconsole.logからわかるように、「未定義」が記録されました

これまでのところ、attr() のようなメソッドを呼び出すと、リストされたセレクターの要素の 1 つからのみ結果が得られることしかわかりません。しかし、一致した要素ごとに .on(event) のイベント変数を個別に設定する必要があります。これどうやってするの？

ありがとうございました

4

1 に答える 1

0

通常のプラグインパターンは次のようになります。

$.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
于 2012-05-31T03:16:26.153 に答える