2

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

4

4 回答 4

2

看起来你想要做的是：

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

有关我是如何做到这一点的更多信息，请查看GitHub 上的相关问题。

（也作为 UIKit 手风琴的答案发布，并且 ng-repeat 不起作用）

于 2016-03-11T19:57:28.047 回答
0

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

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

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

于 2016-03-03T20:25:59.023 回答
0

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

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

这对我有用。

于 2016-06-21T15:58:07.467 回答
0

我有同样的问题，但我正在使用 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 的人有用。

于 2016-11-23T03:40:46.130 回答