同じjQueryプラグインの2インスタンスを使用した状態の保存

Question

kendouiグリッドを構築するためのjQueryプラグインをコーディングしています。同じページでプラグインの2インスタンスを使用しなければならなくなるまで、すべてが大丈夫でした。この場合、プラグインの各インスタンスが独自のデータを持つ必要があります。

.DATA（）でデータを格納するためのjQueryガイドラインを読みましたが、プラグインのコードの外側から 'getSelectedItem（）'へのアクセスを試みるとき：

selectedItemGrid1= $("#Grid1").kendoGrid_extended.getSelectedItem();
selectedItemGrid2= $("#Grid2").kendoGrid_extended.getSelectedItem();

.

SelectedItemGrid1のGrid2のSelectionItemを取得します。これが私のプラグインコードの単純化されたバージョンです。基本的に私がしたいのは、いつでもグリッドの行が選択されています（ "kendogrid定義の"イベントの変更）、新しい選択された行をプラグインの内側に保存するので、ユーザーが「削除」ボタンをクリックしてから選択した行をプラグインし、プラグインから回復した情報を使用して削除アクションを呼び出します。

$.fn.kendoGrid_extended = function (options) {
    var opts = $.extend({}, $.fn.kendoGrid_extended.defaults, options);
    opts.controlId = '#' + this.attr('id');
    var gridExtended;
    var selectedItem;
    var instance = $(this);

    //Public accessor for the selectedItem object.
    $.fn.kendoGrid_extended.getSelectedItem = function () {
        return instance.data('selectedItem');
    }

    opts.gridDataSource = new kendo.data.DataSource({
        type: "json",
        serverPaging: true,
        serverSorting: true,
        sort: sortObject,
        serverFiltering: true,
        allowUnsort: true,
        pageSize: opts.pageSize,
        group: opts.group,
        transport: {
            read: {
                url: opts.dataSourceURL,
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: function () { return opts.dataSourceParamsFunction(); }
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: opts.dataSourceSchema,
    });

    gridExtended = $(opts.controlId).kendoGrid({
            columns: opts.gridColumns,
            dataSource: opts.gridDataSource,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            groupable: opts.groupable,
            sortable: { mode: "multiple" },
            filterable: false,
            selectable: true,
            scrollable: true,
            resizable: true,
            reorderable: true,
            columnReorder: SetColumnsReorder,
            columnResize: SetColumnsResize,
            change: function () {
                var gridChange = this;
                gridChange.select().each(function () {
                    selectedItem = gridChange.dataItem($(this));
                    instance.data('selectedItem', selectedItem);
                });
            }
        });
}

.

コード自体それは私のプラグインの単純化されたバージョンです。プラグインの開発のjQueryガイドラインを読んだように、これがプラグインを書くための最良の方法ではないかもしれないことを知っています。あなたが私を正しい方向に向けたり、私のコードが機能していない理由を教えたりすることができるならば素晴らしいでしょう。あらかじめおかげろ！

Answer 1

私は最後に、ヘルパーのグリッドに固有のIDを持つ隠された入力を追加しました。その隠された入力で私はjQuery .data（）で永続的にしたいすべてのデータを保存しています。

だから私がプラグインを使用して2グリッドを生成するならば、各グリッドはこのようなものを追加しています：

<input type="hidden" id="uniqueIdHere" />

.

Answer 2

あなたが書いた「公衆アクセサ」を必要としないと思います、私はあなたが実際にこのようにそれを得ることができると思います：

 selectedItemGrid1= $("#Grid1").data('selectedItem);
 selectedItemGrid2= $("#Grid2").data('selectedItem);

.

そのインスタンス jQueryオブジェクトへの要素。それでもjQueryメソッドの残りを使用することができ、例を確認してください。