2

The span for the selected value in my code doesn't seem to populate initially. Can anyone tell me why this is?

Fiddle: http://jsfiddle.net/vVLdQ/

My HTML:

<div>
Disable:
 <span data-bind="text: options[1].text"></span><input type="checkbox" data-bind="checked: options[1].disable" />
 <span data-bind="text: options[2].text"></span><input type="checkbox" data-bind="checked: options[2].disable" />
 <span data-bind="text: options[3].text"></span><input type="checkbox" data-bind="checked: options[3].disable" />
</div>
<div>
<select data-bind="value: selectedValue">
 <option data-bind="value: options[0].text, text: options[0].text"></option>
 <option data-bind="value: options[1].text, text: options[1].text, disable: options[1].disable"></option>
 <option data-bind="value: options[2].text, text: options[2].text, disable: options[2].disable"></option>
 <option data-bind="value: options[3].text, text: options[3].text, disable: options[3].disable"></option>
</select>
</div>
<span data-bind="text: selectedValue"></span>

My Javascript:

var selectModel;

function OptionModel(text) {
    var me = this;
    me.text = text;
    me.disable = ko.observable(false);
    me.disable.subscribe(function(disableVal) {
        if (disableVal && selectModel.selectedValue() == me.text) {
            selectModel.selectedValue('-- Select --');
        }
    });
}
var options = [
    new OptionModel('-- Select --'),
    new OptionModel('a'),
    new OptionModel('b'),
    new OptionModel('c')
    ];
selectModel = {
    options: options,
    selectedValue: ko.observable(options[0].text)
};
ko.applyBindings(selectModel);​
David Minor
  • 632
  • 7
  • 15
  • Why not using the [options](http://knockoutjs.com/documentation/options-binding.html) binding to populate the _select_ ? – gbs Sep 25 '12 at 19:14
  • If you can show me a way to disable options via binding, I'd be glad to! – David Minor Sep 25 '12 at 20:51
  • Indeed... I don't see a way using options. Here is another solution using _foreach_ instead: [fiddle](http://jsfiddle.net/gbos/vVLdQ/5/) – gbs Sep 25 '12 at 21:29

1 Answers1

3

EDIT: as nemesv said in the comments: "The select data-bind="value: selectedValue" binding runs when there is no option value populated yet which resets the selectedValue to null."

From another StackOverflow question here, I came up with this:

<select data-bind="foreach: options, value: selectedValue">
    <option data-bind="text: text, value: text, disable: disable"></option>
</select>

I also changed some things around in the check boxes as well to make it more readable. See fiddle for full example.

Community
  • 1
  • 1
Rynan
  • 481
  • 2
  • 4
  • 2
    It is the order of the databinding execution which causes the original problem. The `select data-bind="value: selectedValue"` bindings runs when there is no option value populated yet which resets the `selectedValue` to `null`. Your solution nicely solves this problem. – nemesv Sep 25 '12 at 21:20
  • Thanks, I thought it might be that but wasn't entirely certain. I'll edit my answer so that that information will be easily visible to everyone. – Rynan Sep 25 '12 at 21:22