Knockout中Observable更新时选中项未同步更新问题修复咨询

你遇到的问题核心在于下拉菜单的optionsValue绑定的是语言相关的产品名称字符串。当切换语言时，原来选中的产品名称（比如英文的"Door"）会变成法文的"Dooreux"，但cartItemName里存储的还是旧的英文名称，此时下拉菜单找不到匹配的选项值，就会自动回退到默认的提示选项。

我们需要把绑定的value从语言相关的字符串改成产品对象本身，这样不管语言怎么切换，产品的引用是不变的，选中状态就能保持。同时调整相关的辅助函数，适配对象类型的绑定值。

具体修改步骤 #

1. 调整下拉菜单的绑定规则：

   • 移除optionsValue绑定（Knockout默认会用对象本身作为选项值，无需手动指定）
   • 把value绑定从cartItemName改为存储产品对象的属性（重命名为selectedProduct更语义化）
   • 保留optionsText用getProductName来显示对应语言的名称

2. 更新购物项视图模型：

   • 将cartItemName改为selectedProduct，用来存储选中的产品对象，而非字符串名称

3. 简化颜色获取函数：

   • getProductColours不再需要通过名称匹配产品，直接接收产品对象就能获取对应的颜色数组

4. 调整颜色下拉的绑定逻辑：

   • 把颜色下拉的数据源改为$parent.getProductColours(selectedProduct)
   • 可见性判断改为检查selectedProduct()是否存在

JavaScript 部分 #

var handlerVM = function () { 
  var self = this; 
  self.cartItems = ko.observableArray([]); 
  self.availableProducts = ko.observableArray([]); 
  self.language = ko.observable(); 

  self.init = function () { 
    self.initProducts(); 
    self.language("english"); 
  } 

  self.initProducts = function () { 
    self.availableProducts.push( 
      new productVM("Shelf", ['White', 'Brown']), 
      new productVM("Door", ['Green', 'Blue', 'Pink']), 
      new productVM("Window", ['Red', 'Orange']) 
    ); 
  } 

  self.getProducts = function () { 
    return self.availableProducts; 
  } 

  self.getProductName = function (product) { 
    if (product != undefined) { 
      return self.language() == "english" ? product.productName().english : product.productName().french; 
    }
    return "";
  } 

  self.getProductColours = function (selectedProduct) { 
    if (selectedProduct) { 
      return selectedProduct.availableColours; 
    }
    return [];
  } 

  self.addCartItem = function () { 
    self.cartItems.push(new cartItemVM()); 
  } 

  self.changeLanguage = function () { 
    self.language() == "english" ? self.language("french") : self.language("english"); 
  } 
} 

var productVM = function (name, availableColours) { 
  var self = this; 
  self.productName = ko.observable({ 
    english: name, 
    french: name + "eux", 
  }); 
  self.availableColours = ko.observableArray(availableColours); 
} 

var cartItemVM = function () { 
  var self = this; 
  self.selectedProduct = ko.observable(); // 改为存储产品对象
  self.cartItemColour = ko.observable(); 
} 

var handler = new handlerVM(); 
handler.init(); 
ko.applyBindings(handler);

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
  <div data-bind="foreach: cartItems">
    <div>
      <select data-bind="
        options: $parent.getProducts(), 
        optionsText: function (item) { return $parent.getProductName(item); }, 
        optionsCaption: 'Choose a product', 
        value: selectedProduct
      ">
      </select>
    </div>
    <div>
      <select data-bind="
        options: $parent.getProductColours(selectedProduct), 
        optionsText: $data, 
        optionsCaption: 'Choose a colour', 
        value: cartItemColour, 
        visible: selectedProduct()
      ">
      </select>
    </div>
  </div>
  <div>
    <button data-bind="text: 'add cart item', click: addCartItem"></button>
    <button data-bind="text: 'change language', click: changeLanguage"></button>
  </div>
</div>

• 给getProductName添加空值处理，避免未选中产品时出现错误
• 简化addCartItem函数的参数（原参数未用到）
• 使用语义化的属性命名（比如selectedProduct比cartItemName更清晰）

内容的提问来源于stack exchange，提问作者OfirD