1

I am creating a side menu using bootstrap accordion collapse and making use of knockout js binding. My problem is in assigning the right HTML element ids for toggle and collapse purposes as required by bootstrap. I have though of using the $indexin knockout to autogenerate the id. But not coming right. 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>
SW4
  • 69,876
  • 20
  • 132
  • 137
mboko
  • 359
  • 6
  • 16

1 Answers1

3

well i already done something like this before hope this 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 dynamic id and href in oder to work with this stuff . Well lucky you have one loop over if incase there exists multiple loops use $parentContext.index() and so on .

You just need to use attr to create dynamic id and href using $index() which gives you unique id everytime it loops .

super cool
  • 6,003
  • 2
  • 30
  • 63
  • aha. Now I get the unique Ids. Thanks for the heads on multiple loops. I might have something like that ahead on this project :) – mboko Dec 10 '14 at 10:49
  • cool gald i could help . cheers #upvote if you feel it's helpful (optional) – super cool Dec 10 '14 at 12:27
  • Correct me if I'm wrong, When the accordionItems = ko.observableArray() and a new item is inserted between the items, Possibility of a duplicate ids ? – pravin Feb 11 '15 at 10:03
  • zero possibility . reason here is `$index()` value will adjust itself based on no of times loop will run .if you push in between or last or first its doesn't matter .Cheers . – super cool Feb 11 '15 at 14:38