twitter-bootstrap – 使用带淘汰的引导按钮下拉菜单

发布时间：2020-12-18 00:06:21 所属栏目：安全来源：网络整理

导读：我试图使用bootstrap的漂亮风格 button dropdowns与淘汰赛.不幸的是,下拉列表是使用链接而不是 select构建的.和knockout-bootstrap没有任何帮助的处理程序. 我已经能够使所有的样式工作(按钮类型,图标,选择/取消选择).但是,我仍然无法使点击功能起作用： JS

我试图使用bootstrap的漂亮风格 button dropdowns与淘汰赛.不幸的是,下拉列表是使用链接而不是< select>构建的.和knockout-bootstrap没有任何帮助的处理程序.

我已经能够使所有的样式工作(按钮类型,图标,选择/取消选择).但是,我仍然无法使点击功能起作用：

JS Fiddle Example

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

解决方法

Modified JS Fiddle Example

重现步骤

>摆脱$root上的updateStatus函数.这个简单的任务你不需要它.
>将click事件绑定到$parent.status.

我们希望调用当前文章的状态函数(ko.observable).在定义锚点的位置,上下文父级是Article,因此您要使用$parent.status.当前上下文(单击$root.availableStatus的元素)是将传递给status函数的参数.

<a href="#" data-bind="click: $parent.status">...</a>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!