【问题标题】：Using bootstrap button dropdowns with knockout使用带有淘汰赛的引导按钮下拉菜单
【发布时间】：2013-09-05 06:23:26
【问题描述】：

我正在尝试使用 bootstrap 样式精美的 button dropdowns 进行淘汰赛。不幸的是，下拉菜单是使用链接而不是<select> 构建的，并且knockout-bootstrap 没有任何帮助的处理程序。

我已经能够让所有样式都起作用（按钮类型、图标、选择/取消选择）。但是，我仍然无法让点击功能工作：

<div class="btn-group">
<!-- Change button type based on status -->
<button type="button" class="btn btn-small dropdown-toggle" data-bind="css: {'btn-default' : status().statusName=='Matched', 'btn-danger' : status().statusName=='None', 'btn-info' : status().statusName=='Set'}" data-toggle="dropdown">

  <!-- Add Glyph based on status -->
  <span class="glyphicon" data-bind="css: {'glyphicon-ok' : status().statusName=='Matched', 'glyphicon-remove' : status().statusName=='None', 'glyphicon-list' : status().statusName=='Set'}"></span> <span data-bind="text: status().statusName"> </span> <span class="caret"></span>
</button>

<!-- Loop for status -->
<ul class="dropdown-menu" role="menu" data-bind="foreach: $root.availableStatus">
  <!-- Disable item if selected -->
  <li data-bind="css: {'disabled' : statusName==$parent.status().statusName}">
    <!-- Not working -->
    <a href="#" data-bind="click: $root.updateStatus"><span class="glyphicon" data-bind="css: {'glyphicon-ok' : statusName=='Matched', 'glyphicon-remove' : statusName=='None', 'glyphicon-list' : statusName=='Set'}"></span> <span data-bind="text: statusName"></span></a>]

【问题讨论】：

标签： twitter-bootstrap knockout.js

【解决方案1】：

Modified JS Fiddle Example

重现步骤

去掉 $root 上的 updateStatus 函数。你不需要它来完成这个简单的任务。
将click 事件绑定到$parent.status。

我们希望调用当前Article 上的status 函数（ko.observable）。在定义锚点的地方，上下文父级是Article，所以你想使用$parent.status。当前上下文，即被点击的$root.availableStatus 的元素，是将传递给status 函数的参数。
```
 <a href="#" data-bind="click: $parent.status">...</a>
```

【讨论】：

【解决方案2】：

我不知道它是否可以帮助你（我没有在你的小提琴中看到参考）：

按钮下拉菜单需要Bootstrap dropdown plugin 才能起作用。

$('.dropdown-toggle').dropdown()

【讨论】：

它是缩小的引导 js 的一部分。你可以在非分钟here看到它。