Question

I think it’s timing issue or something. Elements of combobox are gotten from ajax call and if I use selectmenu, knockout data-bind does not get those elements to the combobox. If I comment out, however,

 $("select").selectmenu();

everything is working fine. I used following code

    function ViewModel() {
        // Data
        var self = this;
        self.loaded = ko.observable(false);
        self.groups = ko.observableArray([]);
        //....
        $.getJSON("api/groups", self.groups)
            .done(function () {
                self.loaded(true); $('select').selectmenu('refresh', true);
            });
    }
    ko.applyBindings(new ViewModel());
    $(document).ready(function () {
        // Handler for .ready() called.
        $("select").selectmenu();
    });        

and this html

    <div>Active Group:&nbsp; <select data-bind="options: groups,
                  optionsText: 'Name',
                  optionsValue: 'Id',
                  value: selectedGroupId,
                  optionsCaption: 'Choose a group'"></select></div>

When document is ready, the combobox has single element of “Choose a group”. I verified data is getting OK with Firebug. Is there any way to resolve this problem?

Answer 1

I think you need custom binding with events of selectmenu. Please refer to following.

http://knockoutjs.com/documentation/event-binding.html

Knockout and jQuery Mobile: Binding data to select lists