Question

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

在代码中，问题位于两个模板中，特别是＆＃34; data-parent＆＃34;以及使用＆＃34; parentAccordionRef＆＃34;。此变量的值指向模板外部的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

您的问题是div及其内容之间额外panel-group的结果。使用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 -->

KnockoutJs模板和多个嵌套手风琴

1 个答案:

修改