1

我正在尝试将一些 javascript/jquery 代码转换为能够处理 ajax 选项卡。

当页面加载时，我的所有脚本都加载了，我使用 jquery live 和 livequery 插件来帮助绑定。

每次都在局部视图（asp.net mvc 3）中，单击时转到控制器操作并呈现局部视图并将其粘贴在选项卡中。

所以 live 和 livequery 解决了除了这个问题之外的大部分问题。我正在使用 jquery datatables.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 回答