添加數據綁定到BootStrap下拉列表

Question

我試圖通過數據綁定將一列值列入Twitter Bootstrap下拉列表。

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

我碰到Knockout_bootstrap JS但我不知道它的工作原理與下拉菜單

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

（不提供的示例）

Answer 1

HTML列表VS HTML選擇
自舉下拉列表是一個html列表。

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

敲除JS options binding是對HTML select元件結合。

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

我不能肯定地告訴你要做什麼，但現在什麼你正在做的是加入淘汰賽選項綁定到<ul>，當結合應該是一個<select>。在JS濱

實時實施例以下是在一個jsbin〔實施例使用敲除用於在這兩種情況的結合。 HTML的

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

部分與KO數據綁定

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