将引导程序按钮下拉菜单与剔除一起使用 [英] Using bootstrap button dropdowns with knockout

问题描述

我正尝试将Bootstrap样式精美的按钮下拉菜单与挖空一起使用.不幸的是，下拉列表是使用链接而不是<select>构建的，而基因敲除引导程序没有任何可帮助您的处理程序.

I'm attempting to use bootstrap's nicely styled button dropdowns with knockout. Unfortunately the dropdowns are built using links rather than <select> and knockout-bootstrap doesn't have any handlers that help.

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

I've been able to get all the stylings to work (button type, icons, selected/deselected). But, I still can't get the click function to work:

JS小提琴示例

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

推荐答案

修改后的JS小提琴示例

1. 摆脱$root上的updateStatus函数.您不需要这项简单的任务.

2. 将click事件绑定到$parent.status.

1. Get rid of updateStatus function on your $root. You don't need it for this simple task.

2. Bind the click event to $parent.status.

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

We want the status function (a ko.observable) on the current Article to be called. At the point where the anchor is defined, the context parent is the Article, so you want to use $parent.status. The current context, which is the element of $root.availableStatus being clicked, is the argument that will be passed to the status function.

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

这篇关于将引导程序按钮下拉菜单与剔除一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！