Using knockout bootstrap button dropdowns

Question

I am trying to use bootstrap with a nicely styled knockout button dropdown . Unfortunately, dropdowns are created using links, not <select> , and knockout-bootstrap has no handlers to help.

I managed to get all the styles to work (button type, icons, selected / canceled). But I still can't get the click function to work:

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

Answer 1

Modified JS Script Example

Playback Steps

• Get updateStatus function on $root . You do not need this for this simple task.

• Bind the click event to $parent.status .

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

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

Answer 2

I don't know if this can help you (I don't see the links in your fiddle):

For the dropdown menus for the button, the boot plugin is loaded.

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