I am trying to pull in a list of values through data-bind into a Twitter Bootstrap dropdown.

<div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" data-bind="options: artists, optionsText: 'name', optionsValue: 'id', value:selectedArtistId">
            <li></li>
          </ul>
</div>

I came across Knockout_bootstrap JS but am not sure it works with drop downs

/

(no example provided)

I am trying to pull in a list of values through data-bind into a Twitter Bootstrap dropdown.

<div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" data-bind="options: artists, optionsText: 'name', optionsValue: 'id', value:selectedArtistId">
            <li></li>
          </ul>
</div>

I came across Knockout_bootstrap JS but am not sure it works with drop downs

http://billpull.github.io/knockout-bootstrap/

(no example provided)

• javascript
• twitter-bootstrap
• knockout.js

1 Answer 1

HTML List vs HTML Select
The bootstrap dropdown is an html list.

<ul>
  <li></li>
</ul>

The knockout js options binding is a binding for html select elements.

<select>
   <option></option>
</select>

I cannot tell for sure what you want to do, but what you are currently doing is adding the knockout options binding to a <ul>, when the binding is supposed to be for a <select>.

Live Example in JS Bin
Here is an exmaple in jsbin that uses knockout for binding in both scenarios.

http://jsbin./ITOZUPI/1/edit

part of HTML with ko data-bindings

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Action <span class="caret"></span>
          </button>
  <ul class="dropdown-menu" role="menu" data-bind="foreach: my.VM.Artists">
    <li><a role="menuitem" tabindex="-1" href="#" data-bind="text: artistName, click: getTheArtist"></a></li>
</ul>
</div>

  <p>&nbsp;</p>

  <select data-bind="options: my.VM.Artists, 
                 optionsCaption: 'Please select an Artist...',  
                 optionsText: 'artistName', 
                 optionsValue: 'artistId',
                 value: my.VM.artist_selected"></select>