JQueryオーサリングプラグイン。合格メソッドとオプション

Question

私はinitの後にメソッドとオプションを受け入れる最初のプラグインを作成しようとしています。 私はjQueryのウェブサイト上でオーサリングプラグインのチュートリアルを読んでいたし、私はこの

Fiddle

(function($) { 
    /* Default Options */ 
    var defaults = { 
     column_sort_map: [] 
    }; 

    /* Global Scope */ 
    var sort_col = false; 
    var sortMethods = { 
     date: function(a, b) { 
      var date1 = new Date($(a).find(":nth-child(" + sort_col + ")").html()); 
      var date2 = new Date($(b).find(":nth-child(" + sort_col + ")").html()); 
      if (date1 == date2) { 
       return 0; 
      } 
      if (date1 < date2) { 
       return -1; 
      } 
      return 1; 
     }, 
     string_case: function(a, b) { 
      var aa = $(a).find(":nth-child(" + sort_col + ")").html(); 
      var bb = $(b).find(":nth-child(" + sort_col + ")").html(); 
      if (aa == bb) { 
       return 0; 
      } 
      if (aa > bb) { 
       return 1; 
      } 
      return -1; 
     }, 
     string_nocase: function(a, b) { 
      var aa = $(a).find(":nth-child(" + sort_col + ")").html().toLowerCase(); 
      var bb = $(b).find(":nth-child(" + sort_col + ")").html().toLowerCase(); 
      if (aa == bb) { 
       return 0; 
      } 
      if (aa > bb) { 
       return 1; 
      } 
      return -1; 
     }, 
     numeric: function(a, b) { 
      var aa = $(a).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, ''); 
      var bb = $(b).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, ''); 
      if (isNaN(aa)) { 
       aa = 0; 
      } 
      if (isNaN(bb)) { 
       bb = 0; 
      } 
      return aa - bb; 
     } 
    }; 

    var methods = { 
     init: function(options) { 
      // extend options 
      if (options) { 
       $.extend(defaults, options); 
      } 
      alert(options.column_sort_map); 
     }, 
     test: function() { 
     alert("I am a Test"); 
     } 
    }; 
    $.fn.dataTable = function(method) { 
     return this.each(function() { 
      if (methods[method]) { 
       return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
      } else if (typeof method === 'object' || !method) { 
       return methods.init.apply(this, arguments); 
      } else { 
       $.error('Method ' + method + ' does not exist on jQuery.dataTable'); 
      } 
     }); 
    }; 

})(jQuery); 

が出ていると私はHTMLコードが非常に大きい

$("#tbl").dataTable({ 
    column_sort_map: [ 
     "numeric", 
     "string_nocase", 
     "string_nocase", 
     "date", 
     "string_nocase", 
     "string_nocase", 
     "numeric" 
     ] 
}); 

$("#tbl").dataTable("test"); 

でそれを呼び出し、私は新しいテーブルを書くような気がしません。しかし、私の問題では、それは必須ではありません。

私はもう一度ストレスを感じなければなりません。これはこのようなプラグインを作成した私の最初の時の1つです。私はチュートリアルを完全に間違って解釈し、主に間違っているかもしれません。

私の問題は、options.column_sort_mapにアクセスしようとすると「未定義」エラーが発生するということです。ただし、testへの関数呼び出しは期待どおりに機能します。

Answer 1

エラーがあなたのデフォルトを拡張しようとしています。

$.extend(defaults, options); 

これは実際には、新たに渡されたオプション、NOT optionsを保持するためにdefaultsを設定しています。

この修正は、のように単純でなければなりません：最初のパラメータを変更することに加えて、新しく作成されたオブジェクトを返します

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

$ .extend。あなたがデフォルトに影響を与えたくない場合は、次の操作を行います。プラグインに

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

Answer 2

あなたの呼び出しが正しくありません。プラグインを呼び出すときに "メソッド"を提供するように設定していますが、最初の呼び出しではそれをやっていません。

$("#tbl").dataTable("init", . . . 

を入力して、オプションを渡す必要があります。