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列表与HTML选择
引导下拉列表是一个HTML列表。

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

淘汰赛js options binding是对html select元素的绑定。

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

我无法确定您想要做什么，但您目前正在做的是将绑定选项绑定到<ul>，当绑定应该用于<select>。

JS Bin中的实例
以下是jsbin中的一个例子，它在两种情况下都使用knockout进行绑定。

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

带有ko数据绑定的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>

添加数据绑定到Bootstrap下拉列表

1 个答案: