JSFiddle - React, Tailwind, and code Playground

by marrok

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>

<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 ">
      <li class="item" data-bind="click : function(){$root.selectedIndex($index())}">      
          <span class="name" data-bind="text: name"></span>
          <span class="desc" data-bind="text: desc"></span>
      </li>
  </ul>
</div>

CSS

.name {
    border-right:1px solid;
    width : 5em;
    display: inline-block;
}
.desc{
    width : 15em;
    display: inline-block;
}
.item:hover{
    background-color: #d3d3d3
}
.list{
    width:23em; // Magic Number... eww; use lesscss and/or calc the right number
}

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());