如何使 javascript 模块模式与 ajax 一起工作？

Question

我正在尝试转换一些 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));

Answer 1

您似乎正在调用许多东西oDataTable，并且它们都以不兼容的方式分配/访问。

我看到的第一个问题是，您尝试从 _fnSetupTable 返回的 oDataTable 值实际上是从 inner 函数返回的，因此以下赋值不执行任何操作：

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？