CODEWITHSUNDEEP
javascriptknockout.jsbinding
Jonoh89
Jonoh89

Reputation: 35

Knockout Binding not updating with foreach select options

I have two selections, the seconds options options are dependent on the first selection.

Both of the selection boxes NEED to have a class attached to them, so I can not use the options attribute. The only way I have found to do this is using the foreach method.

I need to track both of the selected values at any time, but the second selection does not update its value when repopulated with new data. Please see the fiddle.

Another requirement is if the original option passed in through the viewmodel creation for the second selection is there, I would like that to be the default when populated. e.g in the fiddle when changing from WPA-PSK to none and then back I would like the default selection to be MIX(passed in) rather than AES.

Fiddle: Link to Fiddle

function ViewModel(security) {
        var self = this;

        self.authenticationMode = ko.observable(security.authenticationMode);
        self.encryptionType = ko.observable(security.encryptionType);

        self.authenticationModes = ko.observableArray([{translationText: "None", mode: "NONE", translationClass: "T_WPA-PSK"},
                                    {translationText: "Open", mode: "OPEN", translationClass: "T_WPA-PSK"},
                                    {translationText: "WPA-PSK", mode: "WPA-PSK", translationClass: "T_WPA-PSK"}]);

        self.encryptionTypes = ko.computed(function () {
            console.log(self.authenticationMode());
            if (self.authenticationMode() === 'OPEN') 
                return [{translationText: "WEP", type: 'WEP', translationClass: "T_WEP"}];
            if (self.authenticationMode() === 'WPA-PSK') 
                return [{translationText: "AES", type: 'AES', translationClass: "T_AES"},
                       {translationText: "MIX", type: 'MIX', translationClass: "T_MIX"}];
            return [];
        });
    }

    ko.applyBindings(new ViewModel({authenticationMode: 'WPA-PSK', encryptionType: 'MIX'}));


<select data-bind="value: authenticationMode, foreach: authenticationModes">
     <option data-bind="text: translationText, value: mode, attr: { class: translationClass }"></option>
</select>

<select data-bind="value: encryptionType, foreach: encryptionTypes">
     <option data-bind="text: translationText, value: type, attr: { class: translationClass }"></option> 
</select>

<p>Selected Authentication: <b data-bind="text:authenticationMode"></b></p>
<p>Selected Encryption Type: <b data-bind="text:encryptionType"></b></p>

Fiddle Using Options - Another way I found using options to set the class with optionsAfterRender method.

Upvotes: 0

Views: 796

Answers (1)

Hans Roerdinkholder
Hans Roerdinkholder

Reputation: 3000

Updated your fiddle:

http://jsfiddle.net/fS8qp/7/

Both requirements are met by adding the following in your viewmodel:

self.defaultEncryptionType = security.encryptionType;

self.authenticationMode.subscribe(function () {
    self.encryptionType(self.defaultEncryptionType); // This will select the passed in encryptionType, if it exists in the current list of options
    self.encryptionType.valueHasMutated(); // This will trigger an update of the observable
});

Upvotes: 1

Related Questions