css - bootstrap - data-toggle="collapse"

Generación automática de direcciones Div para Bootstrap Accordion Unión de menú con Knockout js

Question

Estoy creando un menú lateral utilizando el colapso del acordeón de arranque y haciendo uso de la unión js knockout. Mi problema es asignar los identificadores de elemento HTML correctos para alternar y colapsar, tal como lo requiere el programa de arranque. He pensado utilizar el $ indexin knockout para autogenerar la identificación. Pero no viene bien. Ver mi código a continuación y comentarios:

<div id="content" style="font-size: 8.8pt">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default" id="news">
            <div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()"><!--accordionItems is an observableArray with my accordion objects. Object has a header and a list of linkitems. Each linkItem object has linkText and url-->
                <a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><!--want to do something like: href="#"+$index-->
                    <p class="panel-title" data-bind="text: nameHead"></p>
                </a> <!--binding a collapse header here.-->
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><!--want to autogenerate the id here using knockout for reference above-->
                    <ul class="Newsbar panel-body" data-bind="foreach: list">
                        <li><a data-bind="attr: { href: url }, text: linkText"></a></li>
                    </ul>
                </div>
            </div>
        </div> 
    </div>
</div>

Answer 1

Bueno, ya he hecho algo como esto antes de que esto ayude

    <div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()">
        <a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion"  aria-expanded="true" aria-controls="collapseOne"   data-bind="attr:{href:''#collapseOne''+$index() }" >
            <p class="panel-title" data-bind="text: nameHead"></p>
        </a> <!--binding a collapse header here.-->
        <div  class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" data-bind="attr:{id:''collapseOne''+$index()}">
            <ul class="Newsbar panel-body" data-bind="foreach: list">
                <li><a data-bind="attr: { href: url }, text: linkText"></a></li>
            </ul>
        </div>
    </div>

Déjame explicarte aquí:

Solo necesitas crear una id dinámica y una href para trabajar con esto. Es una suerte que tenga un bucle terminado si en caso de que existan bucles múltiples use $parentContext.index() y así sucesivamente.

Solo necesita usar attr para crear una identificación dinámica y href usando $ index () que le proporciona una identificación única cada vez que se repite.