jquery - KnockoutJs 模板和多个嵌套 Accordion

Question

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

在代码中，问题在于两个模板，特别是“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 而创建的。 模板的占位符在替换其内容后仍然存在。

您可以通过在示例中的任何工作 Accordion 之间添加额外的 div 来重现此情况。

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

<小时/>

编辑

您可以使用无容器模板绑定(bind)。 (我自己刚刚学到这个!)

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 -->