Question

我正在尝试动态将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

Answer 1

看起来你想要做的是：

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

有关我如何达到此目的的更多信息，请查看the related issue on GitHub。

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

Answer 2

尝试在重新初始化之前从元素中删除折叠数据：

(f << 16)

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

Answer 3

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

for pcHobbiest in pcHobbiests {
    print(pcHobbiest)
}

这对我有用。

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

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

HTML

的JavaScript

4 个答案: