javascript - ノックアウト：ドロップダウンの各オプションのテーブル

Question

<option>meにそれぞれ2つの列を持つテーブルが必要です<select>。このJSFIDDLE-source
を試しました。しかし、バインディングが機能していません <span>

<span data-bind="text : countryName"></span>
<span data-bind="text : selectedCountry"></span>  

何か案は？または別の解決策？

編集

Answer 1

コンテンツのスタイルを設定することはできませんが、Twitterの優れたBootstrapフレームワークのようなものを使用して同様の効果を得ることができます。

http://jsfiddle.net/marrok/QdjPt/

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="name" data-bind="text: selectedItem().name"></span>
    <span class="desc" data-bind="text: selectedItem().desc"></span>    <span class="caret"></span>
  </a>

  <ul class="list dropdown-menu" data-bind="foreach: items ">
      <!-- I should be able to use 'click' here but I'm not sure why it doesn't work. -->
      <li class="item" data-bind="event: {mouseover : function(){$root.selectedIndex($index())}}">      
          <span class="name" data-bind="text: name"></span>
          <span class="desc" data-bind="text: desc"></span>
      </li>
  </ul>
</div>

Javascript：

var Thing = function(name, desc) {
    var self = this;
    self.name = ko.observable(name);
    self.desc = ko.observable(desc);
};

var AppModel = function() {
    var self = this;
    self.items = ko.observableArray([
        new Thing(1, "Thing One"),
        new Thing(2, "Thing Two"),
        new Thing(3, "Thing Three"),
        new Thing(4, "Thing Four")]);
    self.selectedIndex = ko.observable(0);
    self.selectedItem = ko.computed(function() {
        return self.items()[self.selectedIndex()];
    })
};

ko.applyBindings(new AppModel());​