Question

我正在尝试转换一些javascript / jquery代码，以便能够处理ajax标签。

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

每次都是局部视图（asp.net mvc 3），点击后转到控制器动作并渲染局部视图并将其粘贴在标签中。

因此除了这个问题之外，现场和现场查询解决了大部分问题。我正在使用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，并且它们都以不兼容的方式分配/访问。

我看到的第一个问题是，您尝试从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？

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

1 个答案: