- 首页
- 前端开发
- 使用 Knockout js 为 Bootstrap Accordion Menu 绑定自动生成 Div Id
使用 Knockout js 为 Bootstrap Accordion Menu 绑定自动生成 Div Id
[英] Auto-generate Div Ids for Bootstrap Accordion Menu binding with Knockout js
本文介绍了使用 Knockout js 为 Bootstrap Accordion Menu 绑定自动生成 Div Id的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用引导手风琴折叠和使用淘汰赛 js 绑定创建一个侧边菜单.我的问题是根据引导程序的要求为切换和折叠目的分配正确的 HTML 元素 ID.我虽然使用 $indexin 淘汰赛来自动生成 id.但来不及了.请参阅下面的代码和评论:
<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 是一个带有我的手风琴对象的 observableArray.对象有一个标题和一个链接项列表.每个linkItem对象都有linkText和url--><a style="text-decoration:none;"data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><!--想做这样的事情:href="#"+$index--><p class="panel-title" data-bind="text: nameHead"></p></a><!--在此处绑定折叠标题.--><div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><!--想在这里使用knockout自动生成id，供上面参考--><ul class="Newsbar panel-body" data-bind="foreach: list"><li><a data-bind="attr: { href: url }, text: linkText"></a></li>
解决方案
好吧，我之前已经做过类似的事情，希望对您有所帮助
<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><!--在此处绑定折叠标题.--><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>
让我在这里解释一下:
您只需要创建动态 id 和 href 即可使用这些东西.幸运的是，如果存在多个循环，请使用 $parentContext.index() 等等.
您只需要使用 attr 来创建动态 id 和 href 使用 $index() 每次循环时都会为您提供唯一的 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>
解决方案
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 .
这篇关于使用 Knockout js 为 Bootstrap Accordion Menu 绑定自动生成 Div Id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
