我正在尝试使用 Bootstrap 的精美样式按钮下拉菜单 http://getbootstrap.com/components/#btn-dropdowns淘汰赛。不幸的是,下拉菜单是使用链接而不是<select>
并且 knockout-bootstrap 没有任何有帮助的处理程序。
我已经能够使所有样式正常工作(按钮类型、图标、选择/取消选择)。但是,我仍然无法让点击功能发挥作用:
JS 小提琴示例 http://jsfiddle.net/StephenEdmondson/VMmjp/4/
<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 Fiddle 示例 http://jsfiddle.net/VMmjp/8/
重现步骤
-
摆脱updateStatus
功能在你的$root
。这个简单的任务不需要它。
-
绑定click
事件至$parent.status
.
我们想要status
函数(一个ko.observable
)在当前Article
被称为。在定义锚点时,上下文父级是Article
,所以你想使用$parent.status
。当前上下文,它的元素$root.availableStatus
被单击的是将传递给的参数status
功能。
<a href="#" data-bind="click: $parent.status">...</a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)