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

【问题标题】：How to correctly append dynamic GetUIKit accordions?如何正确附加动态 GetUIKit 手风琴？
【发布时间】：2016-11-23 14:41:05
【问题描述】：

我正在尝试动态地将UIKit Accordions 附加到可排序列表中。最初的项目（手风琴）正在工作，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"));

这些都不能解决问题。

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

JSFIDDLE

【问题讨论】：

标签： javascript jquery html getuikit

【解决方案1】：

看起来你想做的是：

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

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

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

【讨论】：

你能提供一个演示吗？
@IonicăBizău：我根据您在问题中提供的代码创建了a demo on CodePen。抱歉耽搁了。

【解决方案2】：

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

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

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

【讨论】：

演示？我试过了，但并没有真正奏效。这是马车。

【解决方案3】：

添加后尝试更新手风琴的所有项目，

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

这对我有用。

【讨论】：

【解决方案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)
  }
});

我的头脑认为这是渲染的时间问题。回想起来，实际的解决方案非常有意义。希望它对使用带有 MeteorJS 的 UIKit 的人有用。 meteor javascript uikit

【讨论】：