Drop down css not working with knockout bind option

Question

The issue is that when I bind options to the dropdown, "ui dropdown" makes it disappear and nothing is in the cell in my browser(it dosent use the css properly in jsfiddle). If i remove that css then i see the out of the box dropdown.

creating a table with a viewmodel collection and want a dropdown of values for the individual risks

//part of the viewmodel
var ViewModel = {
Collection: ko.observableArray(),
availableRisks: ['L', 'H'],

using

$('.ui.dropdown').dropdown();

doesn't help. Sample code that dosent work with the dropdown:

http://jsfiddle.net/7vh2t33m/2/

Answer 1

There are bindings for jQuery UI and knockout, use them. http://gvas.github.io/knockout-jqueryui/

Rule of thumb, in a knockout application nothing may touch the DOM except knockout, or without informing knockout. Therefore, mixing knockout with jQuery UI without anything that bridges the gap between them will not work.

Taken from the example in knockout-jqueryUI selectmenu binding documentation :

var ViewModel = function () {
  this.items = ko.observableArray([
      { id: '1', text: 'First' },
      { id: '2', text: 'Second' },
      { id: '3', text: 'Third' },
      { id: '4', text: 'Fourth' }
  ]);
  this.value = ko.observable('1');
};

ko.applyBindings(new ViewModel());

and in the view

<!-- ko foreach: items -->
<input type="radio" name="radios" data-bind="attr: { value: id }, checked: $parent.value" />
<!-- /ko -->
<br/>
<select data-bind="value: value, selectmenu: { width: 300 }, options: items, optionsValue: 'id', optionsText: 'text'">
</select>
<br />