Knockout Accordian Template Binding

by Keyur Patel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
    <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 }">
<!-- 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 -->
                    </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>
           ...

JavaScript

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