От новичка до гуру: Курсы программирования на CyberDuff

Как правильно добавить динамические аккордеоны GetUIKit?

Я пытаюсь динамически добавить аккордеоны UIKit в сортируемый список. Исходные элементы (аккордеоны) работают, но динамически добавленные не работают.

HTML

<div class="second-list"  data-uk-observe>
    <div class="uk-sortable uk-margin uk-accordion" data-uk-sortable="{group:'test'}" data-uk-accordion="{showfirst: false}">
        <div class="uk-margin">
            <div class="uk-panel uk-panel-box uk-accordion-title">Item 1
                <button class="uk-button delete-btn">&times;</button>
            </div>
            <div class="uk-accordion-content">test1</div>
        </div>
        <div class="uk-margin">
            <div class="uk-panel uk-panel-box uk-accordion-title">Item 2
                <button class="uk-button delete-btn">&times;</button>
            </div>
            <div class="uk-accordion-content">test2</div>
        </div>
    </div>
</div>

JavaScript

// Remove item handler
$(".delete-btn").on("click", function () {
    // 400 is default
    $(this).closest(".uk-margin").fadeOut(400, function () {
        $(this).remove();
    });
    return false;
});

function addItem () {
    var $container = $(".second-list").find("[data-uk-sortable]");
    $container.append(
    `<div class="uk-margin">
            <div class="uk-panel uk-panel-box uk-accordion-title">new item
                <button class="uk-button delete-btn">&times;</button>
            </div>
            <div class="uk-accordion-content">description</div>
        </div>`
    );
}

addItem();

Это минимальный пример, который я создал для воспроизведения проблемы. Сортируемый динамический элемент работает нормально (можно перетаскивать), а аккордеон - нет. При нажатии на нее я получаю:

Uncaught TypeError: Cannot read property 'data' of undefined

Что я пробовал:

  • Использование data-uk-observe в сортируемом элементе. Я не чувствую никакой разницы в использовании.

  • Попытка инициализировать аккордеон с помощью UIKit API:

    UIkit.accordion($(".uk-margin"));
UIkit.accordion($(".uk-accordion-title"));
UIkit.accordion($(".uk-accordion-content"));

    Ни один из них не решает проблему.

Итак, как правильно добавить динамические аккордеоны GetUIKit?

JSFIDDLE

javascript html jquery getuikit
16.11.2015

Ответы:


1

Похоже, что вы хотите сделать это:

  • Опустите атрибут data-uk-accordion.
  • Сохраните объект, возвращенный вызовом UIkit.accordion(element, options).
  • После добавления новых дочерних элементов аккордеона вызовите accordion.update(). (при условии, что вы сохранили возвращенный объект выше в переменной с именем accordion)

Для получения дополнительной информации о том, как я пришел к этому, ознакомьтесь с связанной проблемой на GitHub.

(также опубликовано как ответ на аккордеон UIKit и ng-repeat не не работает)

11.03.2016
  • Можете ли вы предоставить демо? 12.03.2016
  • @IonicăBizău: я создал демонстрацию на CodePen на основе кода, который вы указали в вопросе. . Извините за задержку. 21.06.2016

    • 2

    Попробуйте удалить данные аккордеона из элемента перед его повторной инициализацией:

    $(".uk-margin").removeData("accordion");
UIkit.accordion($(".uk-margin"));

    Это сработало для меня, когда я писал угловую директиву для этого.

    03.03.2016
  • Демо? Я пробовал, но на самом деле не работает. Это глючит. 04.03.2016

    • 3

    попробуйте обновить все элементы аккордеона после добавления,

    var component = UIkit.accordion($('.uk-accordion'));
component.update();

    Это сработало для меня.

    21.06.2016

    4

    У меня была такая же проблема, но я использую Meteor. Мне потребовался хороший час, чтобы разобраться, и я попробовал несколько разных решений, в том числе с использованием Template.onRender, Template.onCreated, но безрезультатно. Все они, похоже, пытались слишком рано инициализировать JS-аккордеон UIKit.

    Я, наверное, должен был знать лучше, но правильным ответом было поместить код @codermonkeyfuel перед концом моего помощника по шаблону, например:

    Template.appsList.helpers({
  myApps: function() {
    if (Meteor.user() ) {
      console.log("we have a user: " + Meteor.user() );
      var userId = Meteor.userId();
      var user = Meteor.users.findOne(Meteor.userId());
      console.log("userId: " + userId);

      var apps = Meteor.users.findOne({_id: userId}, {
        fields: {
          myApps: 1
        }
      }).myApps;
      // console.log(myApps);
      return user && apps;
    }

    setTimeout(function() {
      var accordion = UIkit.accordion($('.uk-accordion'), {collapse: false});
      accordion.update();
    }, 1000)
  }
});

    Моя голова думала, что это проблема синхронизации с рендерингом. Оглядываясь назад, фактическое решение имеет смысл. Надеюсь, это будет полезно для всех, кто использует UIKit с MeteorJS. метеор javascript uikit

    23.11.2016
    Новые материалы
    5 простых концепций Python, ставших сложными
    #заранее извините 1) Переменные x = 4 y = 5 Переменная в Python — это символическое представление объекта. После присвоения некоторого объекта переменной Python мы приобретаем..
    «Освоение вероятности: изучение совместной, предельной, условной вероятности и теоремы Байеса —…
    Виды вероятности: Совместная вероятность Предельная вероятность Условная вероятность Диаграмма Венна в вероятностях: В “Set Theory” мы создаем диаграмму Венна...
    Основы Spring: Bean-компоненты, контейнер и внедрение зависимостей
    Как лего может помочь нашему пониманию Когда мы начинаем использовать Spring, нам бросают много терминов, и может быть трудно понять, что они все означают. Итак, мы разберем основы и будем..
    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..
    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..
    «Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
    TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..