Как заставить шаблон модуля javascript работать с ajax? - PullRequest
Новая
       28

Как заставить шаблон модуля javascript работать с ajax?

1 голос
/ 16 марта 2011

Я пытаюсь преобразовать некоторый код javascript / jquery, чтобы иметь возможность обрабатывать вкладки ajax.

У меня есть все мои скрипты, загружаемые при загрузке страниц, и я использую плагин jquery live и livequery, чтобы помочь с привязкой.

Каждый раз, когда выполняется частичное представление (asp.net mvc 3), и при щелчке он переходит к действию контроллера, отображает частичное представление и вставляет его во вкладку.

Таким образом, live и livequery решают большинство проблем, за исключением одной. Я использую плагин jquery datatables.net, и как только он показывает, что я храню его в переменной и использую его местами.

Дело в том, что, поскольку я использую шаблон модуля, код выполняется задолго до того, как таблица даже будет отрисована. Таким образом, переменная, хранящая объект, является «неопределенной». Я попытался обернуть его с помощью оператора livequery jquery, и это заставило таблицу работать, но переменная по-прежнему "undefined".

Я предполагаю, что это не похоже на 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));

1 Ответ

1 голос
/ 16 марта 2011

Похоже, вы звоните по номеру 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?

...