javascript - 将数据绑定(bind)添加到 Bootstrap 下拉列表

Question

我正在尝试通过数据绑定(bind)将值列表拉入 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 列表与 HTML 选择
bootstrap 下拉菜单是一个 html 列表。

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

knockout js options binding是 html 的绑定(bind) select元素。

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

我无法确定您想要做什么，但您目前正在做的是添加绑定(bind)到 <ul> 的 knockout 选项，当绑定(bind)应该用于 <select> 时.

JS Bin 中的实例
这是 jsbin 中的一个示例，它在两种情况下都使用 knockout 进行绑定(bind)。

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

部分带有 ko 数据绑定(bind)的 HTML

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