JSFiddle - React, Tailwind, and code Playground

by txhi

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<form>
  <div>
    <div>
      <ol>
        <li>1. Click the down arrow with your mouse</li>
        <li>2. Press 'H' on your keyboard. 'Hazel' will be highlighted.</li>
        <li>3. Click 'Hazel' with your mouse.</li>
        <li>4. You will notice that the alert inside the selectedRoomNameIndex.subscribe never fired.</li>
      </ol>
      <p>Your Items</p>
      <div id="list" data-bind="jqxDropDownList: {source: items, selectedIndex: selectedRoomNameIndex, autoDropDownHeight: true, height: 25, width: 200,}">
      </div>
    </div>

  </div>
</form>

JavaScript 1.7

// View Model
var listModel = function (items) {
  var self = this;
  this.items = ko.observableArray(items);
  this.RoomName = ko.observable();
  this.RoomID = ko.observable();

  this.selectedRoomNameIndex = ko.observable(0);
  this.selectedRoomNameIndex.subscribe(function(v) {
    var item = $("#list").jqxDropDownList('getItem', v ); 
    self.RoomName(item.label);
    self.RoomID(item.value);
  });

};

ko.applyBindings(new listModel(["Blue", "Dark", "Gray", "Green", "Hazel", "Magenta", "Red"]));

$('#list').bind('select', function (event) {
  var args = event.args;
  if (args) {
    var item = args.item;
    var label = item.label;
    var value = item.value;
    console.log(label);
    alert(label + ' value: ' + value);
  }
});