Auto Generate Div Ids for Accordion Bootstrap Menu Binding with Knockout js
I am creating a side menu using bootstrap accordion collapse and using jockout js binding. My problem is assigning the correct HTML element ids for toggle and anti-aliasing as required by bootstrap. I have at least using $ indexin knockout to autogenerate id. But it doesn't fit. See my code below and comments:
<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>
source to share
Well I already did something like this before I hope it helps
<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>
Let me explain here:
You just need to create a dynamic id
and href
in another, to work with this material. Well lucky you have one loop, incase there are multiple use loops, $parentContext.index()
etc.
You just need to use attr
$ index () to create a dynamic id and href, which gives you a unique id every time it loops.
source to share