Choosing a default value with knockout

Question

I am trying to select a default selection based on one of the properties with which I populate my selection.

This code is copied directly from @rneimeyer fiddle . I did this to do what I wanted.

So, I have a choice as my observable array.

var choices = [
    { id: 1, name: "one", choice: false },
    { id: 2, name: "two", choice: true },
    { id: 3, name: "three", choice: false }
    ];

function ViewModel(choices, choice) {
   this.choices = ko.observableArray(choices);
};

The difference between rimeimeer fiddle and mine is that I have a property choiceadded to my object inside the observable array, instead of having the separate observable parameter that we want by default.

Here's the fiddle in my attempt.

select, choice . , name value, .

<select data-bind="options: choices, optionsText: 'name', value: choice"></select>

, , .

, , choice . , optionText name . , choice value.

Answer 1

, -. , , , . Knockout 3.0.0 ( , )

, , , @XGreen , , , .

, . , .

[
 { id: 1, name: "one", choice: false },
 { id: 2, name: "two", choice: true },
 { id: 3, name: "three", choice: false }
]

, , true, .

, , .

optionsAfterRender options .

<select data-bind="options: choices, 
                   optionsValue: 'name',
                   optionsAfterRender: $root.selectDefault">
</select>

, AfterRender , , , , choice , , .

, ko.applyBindingsToNode 2.2.0, .

function ViewModel(choices) {
   this.choices = ko.observableArray(choices);
    this.selectDefault = function(option,item){
        if(item.choice){
            ko.applyBindingsToNode(option.parentElement, {value: item.name}, item);
        }
    };
};
ko.applyBindings(new ViewModel(choices));

fiddle.

Answer 2

OK , .

id , , id

<select data-bind="options: choices, optionsText: 'name', optionsValue: 'id',  value: selectedChoice"></select>

, , selectedChoice, , , .

var choices = [
    { id: 1, name: "one", choice: false },
    { id: 2, name: "two", choice: true },
    { id: 3, name: "three", choice: false }
    ];

function ViewModel(choices) {
   var self = this;
   self.choices = ko.observableArray(choices);
   self.trueChoice = ko.computed(function(){
       return ko.utils.arrayFirst(self.choices(), function(item){
           return item.choice === true;
       });
    });
    self.selectedChoice = ko.observable(self.trueChoice().id);
};

ko.applyBindings(new ViewModel(choices));

trueChoice arrayFirst, , true.

, , aka selectedChoice , .

Answer 3

Added Gist, which disabled the first parameter in the drop-down list and works fine with KO optionsCaptionbinding using the binding optionsDisableDefault:

https://gist.github.com/garrypas/d2e72a54162787aca345e9ce35713f1f

HTML:

<select data-bind="value: MyValueField,
    options:OptionsList,
    optionsText: 'name',
    optionsValue: 'value',
    optionsCaption: 'Select an option',
    optionsDisableDefault: true">
</select>

Answer 4

You can create a computed value that contains the selected elements.

self.selected_options = ko.computed({
    read: function() {
        return self.choices.filter(function(item){ return item.choice });
    },
    write: function(value) {
        self.choices.forEach(function(item) { item.choice = value.indexOf(item) > 0;});
    }
})

Then bind to it as selected parameters.