Semantic UI Selection Dropdown with KnockoutJS

Question

So, anyone ever tried this before? Is there any way to integrate Semantic UI dropdown with KnockoutJS? Preferably selection dropdown using select because I want to integrate that on my form.

Answer 1

Yes, what would you like to do?

Here's and example:

<div class="ui selection dropdown" id="ProjectDD">
    <input type="hidden" name="project">
    <i class="dropdown icon"></i>
    <div class="default text">Project...</div>
    <div class="menu" data-bind="foreach: ProjectCollection">
        <div class="item" data-bind="text: name, attr: {'data-value':id}"> 
        </div>
    </div>
</div>

Answer 2

I just had the same problem and figured out a way. The problem seems to be with the empty option values generated by knockout.js. So assigning values to options after knockout is bound and then initializing dropdown solved the problem.

//after ko.applyBindings
var i=1;
$("#dropdown > option").each(function() {
    this.value=i;
    i++;
});
$('.ui.dropdown').dropdown();

Answer 3

Yes you can do it using select like this HTML

<div class="ui form">
    <div class="field">
        <select data-bind="options: optionsText,
                           value: selectedOption,
                           optionsCaption: 'Select Options'">
        </select>
    </div>
</div>

And Knockout View Model

var ViewModel = function() {
    var self=this;
    self.optionsText=ko.observableArray(['Some','Thing','Like','This']);
    self.selectedOption=ko.observable();
    self.selectedOption.subscribe(function(newValue) {
        alert("Selected value " + newValue);
    });
};
ko.applyBindings(new ViewModel());

You can see demo jsFiddle