如何正确附加动态 GetUIKit 手风琴？

Question

我正在尝试动态追加UIKit Accordions into a sortable list. The initial items (accordions) are working, but the dynamically appended is not working。

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"));
  

  None 无法解决问题。

那么，如何正确附加动态 GetUIKit 手风琴？

JSFIDDLE

Answer 1

尝试在重新初始化之前从元素中删除手风琴数据：

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

当我为此编写 angular 指令时，这对我有用。

Answer 2

看起来你想要做的是：

• 省略 data-uk-accordion 属性。
• 保存调用 UIkit.accordion(element, options).
返回的对象
• 添加新的手风琴子元素后，调用accordion.update()。 （假设您将上面返回的对象保存在名为 accordion 的变量中）

有关我如何得出的更多信息，请查看 the related issue on GitHub。

（也在 UIKit accordion and ng-repeat doesn't work 上作为答案发布）

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 的人都有用。 meteor javascript uikit