KnockoutJs 模板和多个嵌套手风琴

Question

我正在努力解决与多个嵌套 Twitter Boostrap3(TB3) 手风琴相关的问题（或者可能更合适的 KnockoutJs 和模板（或者这可能是一个微不足道的 HTML 问题））。随附的 jsFiddle 显示了手风琴第二级中的问题。当一个城市或一个人被打开，而对面已经打开时，已经打开的那个不会自动关闭。对于所有其他级别，这都可以正常工作。

在代码中，问题出在两个模板中，特别是“data-parent”和“parentAccordionRef”的使用。这个变量的值指向模板外的一个id。这是行不通的。有什么建议吗？

jsFiddle code

<div class="panel-group" id="titleAccordion">
    <!-- ko foreach: Companies -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#titleAccordion" data-bind="attr: { href: '#companyDetails' + companyId }">
                    <span data-bind="html: name"></span>
                </a>
            </h4>
        </div>
        <div data-bind="attr: { id: 'companyDetails' + companyId }" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="panel-group" data-bind="attr: { id: 'detailsCompany' + companyId }">
                    <div data-bind="template: { name: 'allPersons', data: { Persons: Persons, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } }"></div>
                    <div data-bind="template: { name: 'allCities', data: { Cities: Cities, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } }"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- /ko -->
</div>

<script id="allPersons" type="text/html">

    <!-- ko if: Persons -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: { href: '#allPersonsTitle' + $parent.companyId, 'data-parent': $data.parentAccordionRef }">
                    <span>Persons</span>
                </a>
            </h4>
        </div>
        <div data-bind="attr: { id: 'allPersonsTitle' + $parent.companyId }" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="panel-group" data-bind="attr: { id: 'personsGroup' + $parent.companyId }">
                    <!-- ko foreach: Persons -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse"
                                   data-bind="attr: { href: '#personDetail' + personId, 'data-parent': '#personsGroup' + $parent.companyId }">
                                    <span data-bind="html: name"></span>
                                </a>
                            </h4>
                        </div>
                        <div data-bind="attr: { id: 'personDetail' + personId }" class="panel-collapse collapse">
                            <div class="panel-body">
                                <span>Person details</span>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
    <!-- /ko -->
</script>

<script id="allCities" type="text/html">
    <!-- ko if: Cities -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: { href: '#allCitiesTitle' + $parent.companyId, 'data-parent': parentAccordionRef }">
                    <span>Cities</span>
                </a>
            </div>
        </div>
        <div data-bind="attr: { id: 'allCitiesTitle' + $parent.companyId }" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="panel-group" data-bind="attr: { id: 'citiesGroup' + $parent.companyId }">
                    <!-- ko foreach: Cities -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: { href: '#cityDetail' + cityId, 'data-parent': '#citiesGroup' + $parent.companyId }">
                                    <span data-bind="html: name"></span>
                                </a>
                            </h4>
                        </div>
                        <div data-bind="attr: { id: 'cityDetail' + cityId }" class="panel-collapse collapse">
                            <div class="panel-body">
                                <span>City details</span>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
    <!-- /ko -->
</script>

<script>
    $(function () {

        var viewModel = {
            Companies: ko.observableArray([
                {
                    companyId: 1, name: 'Detox co', range: 1,
                    Persons: [{ personId: 1, name: 'Mr Mr', address: 'street 1' },
                              { personId: 2, name: 'Mrs Mrs', address: 'street 1' }],
                    Cities: [{ cityId: 1, name: 'London', address: 'street 1' },
                              { cityId: 2, name: 'Paris', address: 'street 1' }]

                },
                {
                    companyId: 2, name: 'Toxic world co', range: 2,
                    Persons: [{ personId: 3, name: 'Mr Green', address: 'street 2' },
                              { personId: 4, name: 'Mrs Green', address: 'street 2' }],
                    Cities: [{ cityId: 3, name: 'Madrid', address: 'street 1' },
                             { cityId: 4, name: 'Munchen', address: 'street 1' }]
                }
            ])
        };
        ko.applyBindings(viewModel);
    });
</script>

Answer 1

您的问题是您的panel-group 与其内容之间的额外div 的结果。这个额外的div 是由于使用template 而创建的。 template 的占位符在替换其内容后仍然存在。

您可以通过在示例中的任何工作手风琴之间添加一个额外的div 来重现这一点。

不幸的是，解决方案是不使用模板。

---

编辑

您可以使用无容器模板绑定。 （这是我自己学的！）

jsFiddle

尝试替换：

<div data-bind="template: { name: 'allPersons', data: { Persons: Persons, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } }"></div>
<div data-bind="template: { name: 'allCities', data: { Cities: Cities, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } }"></div>

与：

<!-- ko template: { name: 'allPersons', data: { Persons: Persons, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } } -->
<!-- /ko -->
<!-- ko template: { name: 'allCities', data: { Cities: Cities, companyId: companyId, parentAccordionRef: '#detailsCompany' + companyId } } -->
<!-- /ko -->