Javascript 当可观察更新时，所选选项不会更新，但optionsValue会更新

在以下代码中，产品（用

productVM

表示）具有一个可观察属性（

productName

），其中包含两种语言（英语和法语）的名称

添加

cartItem

并选择产品后，我希望在单击按钮“更改语言”时更新其显示的名称（例如，如果选择“门”，然后单击“更改语言”，则显示的名称应为法语版本（即简单的英语单词加上法语后缀“eux”））

但它不起作用：选项确实会更改，但选定的选项会更改为标题选项

需要更改/添加什么来修复它

var handlerVM=函数（）{
var self=这个；
self.cartItems=ko.observearray（[]）；
自可用产品=可观测的可观测日（[]）；
self.language=ko.observable（）；
self.init=函数（）{
self.initProducts（）；
自我语言（“英语”）；
}
self.initProducts=函数（）{
自助产品推送(
新产品VM（“货架”，“白色”，“棕色”），
新产品VM（“门”，“绿色”，“蓝色”，“粉色”），
新产品虚拟机（“窗口”、“红色”、“橙色”）
);
}
self.getProducts=函数（）{
返回自备产品；
}
self.getProductName=函数（产品）{
如果（产品！=未定义）{
返回self.language（）=“英语”？
product.productName（）.english:product.productName（）.french；
}
}
self.getProductColor=函数（selectedProductName）{
selectedProductName=selectedProductName（）；
//如果不是标题
如果（selectedProductName）{
var matched=ko.utils.arrayFirst（self.availableProducts（），函数（产品）{
return（self.language（）=“english”？product.productName（）.english:product.productName（）.french）==selectedProductName；
});
返回匹配的。可用颜色；
}
}
self.addCartItem=函数（a、b、c、d）{
self.cartItems.push（new cartItemVM（））；
}
self.changeLanguage=函数（）{
self.language（）=“英语”？
自我语言（“法语”）：
自我语言（“英语”）；
}
}
self.productVM=函数（名称、可用颜色）{
var self=这个；
self.productName=ko.observable({
中文：姓名，
法语：名称+欧盟“，
});
self.availablecolors=ko.observearray（availablecolors）；
}
self.cartItemVM=函数（）{
var self=这个；
self.cartItemName=ko.observable（）；
self.cartitemcolor=ko.observable（）；
}
var handler=new handlerVM（）；
handler.init（）；
ko.应用绑定（处理程序）
当您更改所选的
选项时，问题就会出现。在更改过程中，您的
值
绑定可观察值，
cartItemName
，包含英文字符串。例如：
门
。一旦更改语言，就没有一个
选项
为其
选项值
表达式返回
门
，从而将
值全部清除

最好的解决方案是存储对实际viewmodel的引用，而不仅仅是其字符串名称。这确实需要您移动一些其他的位和块，因为您需要手动更新很多位

改变的起点是：

// Remove
self.cartItemName = ko.observable(); 

// Add
self.cartItem = ko.observable();

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


介意看看我的另一个亲戚吗？@HeyJude当然，我今天晚些时候再看！