2

コードの一部を再利用可能なプラグインに変換しようとしています。多くの場合、Ajax リクエストからの動的オプションで select を埋めています。

私はこのようなものを作成することができました：

$.fn.fillSelect = function fillSelect(options) {
var self = this;
options = $.extend({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Data.asmx/StatusList",
    dataType: "json",
    async: true,
    success: function(data) {
        var list = "";
        $.each(data.d, function(i) {
            list += '<option value='
                          + data.d[i].ID + '>'
                          + data.d[i].Nazwa
                          + '</option>';
        });
        self.filter("select").each(function() {
            $(this).empty();
            $(this).append(list);
            //use selectmenu
            if ($.ui.selectmenu) $(this).selectmenu();
        });
    }//,
    //error: function(result) {
    //    alert("Error loading data!");
    //}
}, options);
$.ajax(options);
return self;
}

この背後にあるアイデアは、1 つの要求で複数の選択を同じデータで複数回満たすことができるようにすることです。
Ajax リクエストにはデフォルトのオプションがありますが、さらにオプションを追加したいと考えています。
例:
クリア - 新しいオプションを既存のものと置き換えるか追加するかを決定します。

また、パラメーターとして渡すことができるいくつかのコールバックを関数に追加したいと思います。たとえば、サーバー要求が失敗した場合、このエラーが発生した後に呼び出される関数を指定したいと思います。たとえば、アラートを表示したり、選択を無効にしたりします。

私の質問は、プラグインをどのように変更すればよいか、またはどのパターン (ボイラープレート) を使用する必要があるかということです。

私が見つけた定型文はすべて、選択したアイテム内に「とどまる」プラグインを作成するためのもので、後でそのプラグインのメソッドを呼び出すことができます。

ユーザーが選択内容を入力できるようにするシンプルなプラグインが必要です。その後、それは人生を終わらせます:)

私の主なアイデアは、すべての要素に対してサーバーへのリクエストを 1 つだけ行うことです。

ここに jsfiddle デモがあります: http://jsfiddle.net/JC7vX/2/

4

2 に答える 2

2

基本的なプラグインは次のように構築できます

(function ($){
    $.fn.yourPlugin = function (options){
        // this ensures that function chaining can continue
        return this.each(function (){
            // merge defaults and user defined options
            var params = $.extend({},defaultOptions,options);
            // your plugin code
        });
    }

    /* these options will help define the standard functionality of the plugin,
     * and also serves as a nice reference
     */
    var defaultOptions = {
        someProperty : true
    }
})(jQuery)

プラグインの機能を拡張し、コンテキストを保持するパブリックメソッドを提供するためにできることは他にもありますが、それはあなたの例ではやり過ぎでしょう。

于 2012-11-21T11:58:37.410 に答える
0

これは私のバージョンの回答ですhttp://jsfiddle.net/Misiu/ncWEw/

私のプラグインは次のようになります。

(function($) {
$.fn.ajaxSelect = function(options) {
    var $this = this;
    //options
    var settings = $.extend({}, defaults, options);
    //disable select
    if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) {
        $this.selectmenu('disable');
    }
    //ajax call
    $.ajax({
        type: settings.type,
        contentType: settings.contentType,
        url: settings.url,
        dataType: settings.dataType,
        data: settings.data
    }).done(function(data) {
        var n = data.d || data;
        var list = "";
        $.each(n, function(i) {
            list += '<option value=' + n[i].Id + '>' + n[i].Nazwa + '</option>';
        });
        $this.filter("select").each(function() {
            $(this).empty();
            $(this).append(list);
            if ($.ui.selectmenu && settings.selectmenu) {
                $this.selectmenu();
            }
            settings.success.call(this);
        });
    }).fail(function() {
        settings.error.call(this);
    });

    return this;
};

var defaults = {
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: '/echo/json/',
    dataType: 'json',
    data: null,
    async: true,
    selectmenu: true,
    disableOnLoad: true,
    success: function() {},
    error: function() {}
};
})(jQuery);

非常にシンプルであることは理解してい
ますが、必要なすべての機能を備えてい ます 。次に、ループにアイテムを追加する代わりに追加し ます - 2 つのコールバックを指定できます。1 つはエラー用、もう 1 つは成功用です。



初めてのプラグインなので、改善点がたくさんあります。

いつものように、コメントやヒントは大歓迎です!

于 2012-11-21T20:28:53.630 に答える