Question

我正在创建一个侧面菜单，使用bootstrap手风琴折叠并使用knockout js绑定。我的问题是为bootstrap所需的切换和折叠目的分配正确的HTML元素ID。我虽然使用$ indexin knockout来自动生成id。但不是正确的。请参阅下面的代码和评论：

<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

在我希望这有帮助

之前，我已经完成了类似的事情

    <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()等等，你就会有一个循环。

您只需使用attr使用$ index（）创建动态ID和href，每次循环时都会为您提供唯一ID。

使用Knockout js为Bootstrap Accordion Menu绑定自动生成Div ID

1 个答案: