自动生成带Knockout js的Bootstrap Accordion菜单绑定的Div Id [英] Auto-generate Div Ids for Bootstrap Accordion Menu binding with Knockout js

问题描述

我使用bootstr手风琴折叠和使用knockout js绑定创建一个侧边菜单。我的问题是分配正确的HTML元素ids为切换和折叠目的根据引导的需要。我有使用$ indexin敲除自动生成的id。但不是来的权利。请参阅下面的代码和评论：

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>

推荐答案

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

让我在这里解释：

您只需在oder中创建动态 id 和 href 即可使用此项。
好​​运气你有一个循环如果存在多个循环使用 $ parentContext.index（）等。

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 .

你只需要使用 attr 来创建动态id和href，使用$ index（），它会在每次循环时提供唯一的id。

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

这篇关于自动生成带Knockout js的Bootstrap Accordion菜单绑定的Div Id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！