使用 Knockout 的动态可折叠列表答案

【问题标题】：Dynamic Collapsible List using Knockout使用 Knockout 的动态可折叠列表
【发布时间】：2016-06-29 21:57:14
【问题描述】：

我正在使用敲除来生成数据。使用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本身

【问题讨论】：

标签： knockout.js twitter-bootstrap-3

【解决方案1】：

折叠行为很有趣，因为子点击会冒泡到每个父容器。如果将折叠移动到标签而不是容器，则可以修复折叠行为。

<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() 以便子事件触发而不会冒泡到所有父容器。

【讨论】：