1

私はいくつかのjavascript/jqueryコードをajaxタブを処理できるように変換しようとしています。

ページが読み込まれるときにすべてのスクリプトが読み込まれ、jqueryliveおよびlivequeryプラグインを使用してバインディングを支援します。

毎回部分ビュー（asp.net mvc 3）にあり、クリックするとコントローラーアクションに移動し、部分ビューをレンダリングしてタブに貼り付けます。

したがって、liveとlivequeryは、この1つの問題を除いてほとんどの問題を解決しています。私はjquerydatatables.netプラグインを使用しており、それがレンダリングされたら、それを変数に格納して配置します。

モジュールパターンを使用しているので、テーブルがレンダリングされるずっと前にコードが実行されます。したがって、オブジェクトを格納する変数は「未定義」です。jquery livequeryステートメントでラップアラウンドしようとしましたが、テーブルは実行されますが、変数はまだ「未定義」です。

私の推測では、C＃は参照を更新するのとは異なります。したがって、それは私のグローバル変数（モジュールパターン用のもの）にあり、更新されることはないと考えています。

var tab = (function (my, $)
{
    var myTable = my.dataTable = my.dataTable || {};

    myTable.oDataTable = {};


    myTable.init = function ()
    {
        myTable.oDataTable = _fnSetupTable();
        _fnCreateDateFilters();
    };



    myTable.delete= function (rowToDelete)
    {
        // Need to get the position of the row. Need to use index
        var pos = this.oDataTable.fnGetPosition(rowToDelete[0]);

        /* delete row from table - first param is index of row */
        this.oDataTable.fnDeleteRow(pos, null, true);
    };

    function _fnSetupTable()
    {

        /* Initialize datatable object */

        $('#table').livequery(function ()
        {
            // oDataTable gets used in alot of places later on but since it undefined
            // it will crash when used.
            var oDataTable = $(this).dataTable(
            {
                "bJQueryUI": true,
                "bFilter": true,
                "bAutoWidth": false,
                "sPaginationType": "full_numbers",
                "aaSorting": [[3, 'asc']],  //Default sorting on datetime
                "oLanguage":
                    {
                        "sZeroRecords": "No Records"
                    },
                "aoColumns":
                    [
                        { "bSortable": true, "bSearchable": false }, 
                        {"bSortable": true, "bSearchable": false }, 
                        {"bSortable": false, "bSearchable": false }, 
                        {"bSortable": false, "bSearchable": false }, 
                        {"iDataSort": 3 },
                        { "bSortable": false, "bSearchable": true },  
                        {"bSortable": false, "bSearchable": false },      
                        {"bSortable": false, "bSearchable": false}  
                    ]
            });

            return oDataTable;
        });

    }

    return my;

} (tab || {}, jQuery));

私はoDataTableをかなり使用しています。myTable.Deleteを呼び出すかどうかを確認できるように、そこでoDataTableを使用しますが、「未定義」でクラッシュします。

シーケンス全体を開始する別のモジュールクラスがあります（したがって、上記のコードを実行します）

/* 
*   Document Ready
*/
$(function ()
{

    /* Initializes all plugins and events */
    tab.init();

});


var tab = (function (my, $)
{

    my.init = function ()
    {
        tab.preload();
        tab.dataTable.init();
        $('#tabs').tabs();
    };



return my;

} (tab || {}, jQuery));
4

1 に答える 1

1

あなたが呼んoDataTableでいるものはたくさんあるようですが、それらはすべて互換性のない方法で割り当て/アクセスされています。

私が最初に目にする問題は、oDataTable返そうとする値_fnSetupTableが実際には内部関数にスコープされて返されることです。したがって、次の代入は何もしません。

myTable.oDataTable = _fnSetupTable();

の結果を使用しようとしています_fnSetupTableが、_fnSetupTableは実際には何も返しません、その内部関数は返します。

おそらく、より大きな問題は、モジュールパターンをどのように使用しているかです。問題を示すために、小さな例を作成してみます。

var input = {
    dataTable: "tab table"
}

var tab = (function (my, $)
{
    // this var is local
    var myTable = my.dataTable = my.dataTable || {};

    // creating a property on a local variable
    myTable.oDataTable = {};

    // this is what's returned, but it has no access to myTable
    return my;

} (input));

console.log(tab) // does not have an oTableData property

あなたの例のように、と呼ばれるローカル変数myTableが作成され、テーブルのプロパティが与えられますが、返されるのはmy、ではなく、myTableです。返されたオブジェクトからこれらのプロパティにアクセスできるようにするmy場合は、それらをに割り当てる必要がありますmy。それともあなたは戻るつもりでしたmyTableか？

于 2011-03-16T16:21:55.383 に答える