如何正確附加動態 GetUIKit 手風琴？

Question

我正在嘗試將UIKit Accordions動態附加到可排序列表中。 初始項目（手風琴）正在工作，但動態附加的項目不起作用。

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

Answer 1

看起來你想要做的是：

• 省略data-uk-accordion屬性。
• 保存調用UIkit.accordion(element, options)返回的對象。
• 添加新的手風琴子元素后，調用accordion.update() 。 （假設您將上面返回的對象保存在名為accordion的變量中）

有關我如何得出這一結論的更多信息，請查看GitHub 上的相關問題。

（也在UIKit 手風琴上作為答案發布，ng-repeat 不起作用）

Answer 2

在重新初始化元素之前，嘗試從元素中刪除手風琴數據：

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

當我為此編寫角度指令時，這對我有用。

Answer 3

添加后嘗試更新所有手風琴項目，

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

那對我有用。

Answer 4

我有同樣的問題，但我正在使用 Meteor。 這花了我一個小時的時間來解決，我嘗試了幾種不同的解決方案，包括使用Template.onRender 、 Template.onCreated ，但都無濟於事。 他們似乎都試圖過早地初始化 UIKit 手風琴 JS。

我可能應該更清楚，但正確的答案是將@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