Как использовать одни и те же данные для нескольких элементов в плагине jquery?

Question

Я пишу плагин jQuery для панели инструментов, на которой есть несколько кнопок.Мне нужно, чтобы эта панель инструментов появлялась при наведении на каждый элемент, к которому она вызывается, например, несколько контейнеров элементов на странице показывают одну и ту же панель инструментов при наведении.

Это кажется достаточно простым, но мне нужно, чтобы все панели инструментов были заполнены одним набором данных на основе текущего пользователя.Если я просто создаю плагин во всех контейнерах элементов, мне придется ajax в данных из пользовательской базы данных для каждого элемента на странице (может быть 100).

Я не хочу это ajax этоданные каждый раз, когда я создаю экземпляр плагина.

Мой вопрос: где лучше всего хранить эти данные для доступа ко всем панелям инструментов, или я думаю об этом неправильно?Должен ли я создать одну глобальную панель инструментов с пользовательскими данными, сохранить ее в DOM и переместить в элемент поиска?Или просто добавьте данные, когда они мне понадобятся, прикрепив их к панели инструментов при нажатии кнопки?

Редактировать: Данные, которые я получаю из базы данных (идентификаторы корзины для хранения информации об элементе):

{ 'bucket0' : '0', 'bucket1' : '1', 'bucket2' : '2' }

HTML для страницы товара:

<div class="items-container">
    <div class="item" id="item0">
         <div class="item-toolbar" id="item-toolbar-item0">
              <ul class="item-action save">
                  <li id="0">bucket0</li>
                  <li id="1">bucket1></li>
                  <li id="2">bucket2></li>
              </ul>
         </div>
    </div>
    <div class="item" id="item1">
        <div class="item-toolbar" id="item-toolbar-item1">...</div>
    </div>
    <div class="item" id="item2">
        <div class="item-toolbar" id="item-toolbar-item2">...</div>
    </div>
</div>

Answer 1

Если все элементы имеют одного и того же родителя, вы можете просто сохранить данные на родительском элементе, используя jQuery's .data(), например:

// in some event handler context
var self = $(this);
var parent = self.parent();
var toolbar = parent.data("toolbar");
if (!toolbar) {
    // get data via ajax so you can create the toolbar
    // in the success handler, set the data with so other items can find it:
    // parent.data("toolbar", theToolbar);
}

К вашему сведению, я часто предпочитаю использовать .closest(selector) вместо .parent(), потому что это немного менее хрупко, если структура div модифицируется с дополнительным уровнем по причинам форматирования. Но, поскольку вы не включили соответствующий HTML, я не знаю, какой селектор будет использоваться с .closest().