Question

我正在使用knockout来生成数据。使用template绑定：

    <ul class="category-list-group" data-bind="template: {name: 'categoryTemplate', foreach: $data.categoryRoot}"></ul>

// --- Template
<script id="categoryTemplate" type="text/html">
    <li data-toggle="collapse" class="collapse" data-bind="css: hasChild, attr: {'data-target': '#' + name().replace(/\s+/g, '') }">
        <a>
            <!-- ko text: name--><!-- /ko -->
        </a>
        <ul class="collapse" data-bind="template: { name: 'categoryTemplate', foreach: children },attr: { id: name().replace(/\s+/g, '') }"></ul>
    </li>
</script>

结果在jsfiddle。奇怪的部分是当与孩子一起折叠列表时。如何修复折叠列表？

注意：我在jsfiddle中删除了敲除绑定。我只是显示html本身

Answer 1

折叠很有趣，因为子点击正在冒泡到每个父容器。如果您将折叠移动到＆lt; a＆gt;标签而不是容器，您可以修复崩溃行为。

<ul class="category-list-group">
   <li class="collapsed"  aria-expanded="false">
      <a class="has-child" data-toggle="collapse" data-target="#Concert">

https://jsfiddle.net/7kmmh68p/4/

我见过的唯一另一种选择是使用某种event.stopPropagation（），这样子事件就会触发而不会冒泡到所有父容器。

使用Knockout的动态可折叠列表

1 个答案: