Selected Option Is Not Updated When Observable Updates, Though Optionsvalue Does

In the following code, a product (represented with productVM) has an observable property (productName) containing its name in two languages (english and french). Once a cartItem is

Solution 1:

Your problem occurs when you change the options of your select. During the change, your value bound observable, cartItemName, contains the English string. For example: Door. As soon as you change the language, there is not a single option that returns Door for its optionsValue expression, thereby clearing the value altogether.

The best solution is to store a reference to your actual viewmodel, rather than just its string name. This does require you to move some other bits & pieces around, since you're manually updating quite a bit.

The starting point of the change:

// Removeself.cartItemName = ko.observable(); 

// Addself.cartItem = ko.observable();

// Change
<select data-bind="...
  value: cartItem
" />

In a working snippet, with some other changes to make my work easier:

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

  self.cartItems = ko.observableArray([]);
  self.language = ko.observable("english");
  self.availableProducts = ko.observableArray([
    newproductVM("Shelf", ['White', 'Brown']),
    newproductVM("Door", ['Green', 'Blue', 'Pink']),
    newproductVM("Window", ['Red', 'Orange'])
  ]);

  self.productNameFor = function(product) {
    return product.productName()[self.language()];
  };
  
  self.addCartItem = function (a, b, c, d) {
    self.cartItems.push(newcartItemVM());
  }
  
  self.changeLanguage = function () {
    self.language() == "english" ?
      self.language("french") :
      self.language("english");
  }
}
self.productVM = function (name, availableColours) {
  var self = this;
  self.productName = ko.observable({
    english: name,
    french: name + "eux",
  });
  self.availableColours = ko.observableArray(availableColours);
}

self.cartItemVM = function () {
  var self = this;
  self.cartItem = ko.observable();
  self.cartItemColour = ko.observable();
}

ko.applyBindings(newhandlerVM());

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script><div><divdata-bind="foreach: cartItems"><div><selectdata-bind="options: $root.availableProducts,
                optionsText: $root.productNameFor,
                optionsCaption: 'Choose a product',
                value: cartItem"
      ></select></div><divdata-bind="with: cartItem"><selectdata-bind="options: availableColours,
                optionsCaption: 'Choose a colour',
                value: $parent.cartItemColour"
      ></select></div></div><div><buttondata-bind="text: 'add cart item', click: addCartItem" /><buttondata-bind="text: 'change language', click: changeLanguage" /></div></div>