JQuery UI вкладка добавить событие, сохраняя то же значение? - PullRequest
Новая
       36

JQuery UI вкладка добавить событие, сохраняя то же значение?

1 голос
/ 22 декабря 2011

У меня есть следующий простой код: 

var tabs = null;
function addTab(id, title, data) {
    alert("Begin: " + data.name);
    if (tabs === null) {
        tabs = $("#center-tabs").tabs({
            tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function (event, ui) {
                alert("Event: " + data.name);
            }
        });
    }
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

Когда я звоню: addTab ("# tab-1", "Tab-1", { Название: «Пример 1» }); отображаются два предупреждения («Начало: Пример-1» и «Событие: Пример-1»)

Но если я позвоню снова: addTab ("# tab-2", "Tab-2", { Название: «Пример-2» }); отображаются два предупреждения, но первое с правильным сообщением и второе с сообщением о первом вызове («Начало: Пример-2», но «Событие: Пример-1»)

Что я делаю не так? Это ошибка реализации вкладок?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 22 декабря 2011

Нет, это не ошибка.

При первом вызове addTab() переменная tabs равна null, поэтому выполняется тело оператора if.Внутри метода if, если вы определяете add, тело работает с data.name (Example 1).Это ожидается.

Проблема заключается в том, что во время 1-го запуска создается замыкание, которое содержит переменную data со значением Example 1.Когда вы вызываете ваш addTab() 2-й раз, tabs уже создан, и внутри add метод data.name все еще ссылается на old data.name, который был сохранен во время 1-го запуска.Ваш alert() не может видеть новое значение data.

См. http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/.

Вы можете решить это, не , получая доступ addTabs переменные / параметры внутри add напрямую, потому что это "сохранит их" в замыкании, но с использованием другого механизма, такого как jQuery .data () . 

var tabs = null;
function addTab(id, title, data) {
    if (tabs === null) {
        tabs = $("#center-tabs").tabs({
            tabTemplate: "...",
            add: function (event, ui) {
              console.log("Event: " + $(this).data('name'));
            }
        });
    }
    tabs.data('name', data.name);
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}

ЗДЕСЬ является примером.

0 голосов
/ 22 декабря 2011

Вы устанавливаете контейнер вкладок на # center-tabs дважды, один раз при каждом вызове addTab.Попробуйте изменить свой код так: 

var tabs = $("#center-tabs");
function addTab(id, title, data) {
    alert("Begin: " + data.name);
    if (!tabs.hasClass('ui-tabs')) {
        tabs.tabs({
            tabTemplate: "<li style='line-height: 0.5'><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function (event, ui) {
                alert("Event: " + data.name);
            }
        });
    }
    tabs.tabs("add", id, title);
    tabs.tabs("select", id);
}
...