CODEWITHSUNDEEP
ajaxknockout.jshtml-select
JonathanN
JonathanN

Reputation: 722

Knockout predefined default with options binding to observable array

I am getting a list of options for a select from a server and populating an observableArray. Then I would like to set the selected item to a predefined value. I have a very simple jsFiddle that emulates pulling data from a server with a button click.

http://jsfiddle.net/JonathanN/hev1rqeu/

Here's the Javascript with the basic attempt:

(function() {
    var vm = (function() {
        var self = this;        
        self.array = ko.observableArray([]);        
        self.selectedValue = ko.observable();
        self.useSetTimeout = ko.observable(false);        
        self.array.subscribe(function(newValue) {
            self.selectedValue('b');
        });       
        self.populate = function() {
            self.array(['a','b','c']);
        };       
    }());
    ko.applyBindings(vm);
}());

And here's my workaround, which replaces "self.selectedValue('b');":

var waitForSelectToPopulate = function() {
    self.selectedValue('b');
    if(self.selectedValue() != 'b') {
        setTimeout(waitForSelectToPopulate, 10);
    }
};
waitForSelectToPopulate();

I am not very fond of this as a workaround. It seems like there should be a reasonable way to handle this, but just setting the value on subscribe trigger doesn't seem to work.

Upvotes: 0

Views: 403

Answers (2)

Michael Crook
Michael Crook

Reputation: 1535

Once the populate event has gone and got the json and placed it into your array, why not just set the value right after? as soon as you set the data inside of self.array it will update.

(function() {
    var vm = (function() {
        var self = this;

        self.array = ko.observableArray([]);
        self.selectedValue = ko.observable();

        self.populate = function() {
            // magical assmagic goes and get's json, and converts it to ['a','b','c']
            self.array(['a','b','c']); // dropdown is now populated
            self.selectedValue('c');   // therefore we can set it to a valid value
        };

    }());
    ko.applyBindings(vm);
}());

see the following: http://jsfiddle.net/hev1rqeu/5/

Upvotes: 1

sifriday
sifriday

Reputation: 4472

You need optionsAfterRender. Here's a fiddle:

http://jsfiddle.net/sifriday/hev1rqeu/4/

HTML -

<select data-bind="options: array, value: selectedValue, optionsAfterRender: setVal">

JS addition -

    self.setVal = function() {
        self.selectedValue('b');
    }

Docs - http://knockoutjs.com/documentation/options-binding.html - and scroll down to Note 2

Upvotes: 2

Related Questions