我想你知道发生了什么,为什么它会破坏你的代码,但是你仍然在寻找一个解释,当你真正需要使用 optionsValue ,如果没有。

何时使用 选项值 结合

假设您的饭菜可以卖完,您想向服务器查询 availableMeals :

const availableMeals = ko.observableArray([]);
const loadMeals = () => getMeals().then(availableMeals);
const selectedMeal = ko.observable(null);

loadMeals();

ko.applyBindings({ loadMeals, availableMeals, selectedMeal });

function getMeals() {
  return {
    then: function(cb) {
      setTimeout(cb.bind(null, [{ mealVal: "STD", mealName: "Standard (sandwich)", price: 0 }, { mealVal: "PRM", mealName: "Premium (lobster)", price: 34.95 }, { mealVal: "ULT", mealName: "Ultimate (whole zebra)", price: 290 }]), 500);  
    }
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: availableMeals, 
                   value: selectedMeal,
                   optionsText: 'mealName'"></select>
                   
<button data-bind="click: loadMeals">refresh meals</button>

<div data-bind="with: selectedMeal">
  You've selected <em data-bind="text: mealName"></em>
</div>

<div data-bind="ifnot: selectedMeal">No selection</div>

<p>Make a selection, click on refresh and notice the selection is lost when new data arrives.</p>

当您替换中的对象时会发生什么 可用餐 :

• 淘汰重新呈现选择框的选项
• 淘汰检查新值 selectedMeal() === mealObject
• 击倒没有找到目标 selectedMeal 默认为第一个选项
• knockout将新对象的引用写入 已选择的邮件

问题:您松开了UI选择,因为它指向的对象不再在可用选项中。

选项值 去营救!

这个 选项值 允许我们解决这个问题。而不是存储对 对象 可以随时更换,我们存储 原始的 值,内部字符串 mealVal ,这允许我们检查不同API调用之间的相等性!淘汰赛现在的表现是:

selection = newObjects.find(o => o["mealVal"] === selectedMeal());

让我们看看它的作用:

const availablefoods=ko.observablerray([]);
const loadmeals=()=获取膳食()。然后(可用膳食);
const selectedmeal=ko.observable(空);

加载膳食();

ko.applybindings(装入餐点、可用餐点、选择的餐点);

函数getFeeds()。{
返回{
然后:功能(CB){
settimeout(cb.bind(空,[mealval:“std”,mealname:“standard(sandwich)”,price:0,mealval:“prm”,mealname:“premium(lobster)”,price:34.95,mealval:“ult”,mealname:“Ultimate(whole zebra)”,price:290],500);
}
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: availableMeals, 
                   value: selectedMeal,
                   optionsText: 'mealName',
                   optionsValue: 'mealVal'"></select>
                   
<button data-bind="click: loadMeals">refresh meals</button>

<div data-bind="if: selectedMeal">
  You've selected <em data-bind="text: selectedMeal"></em>
</div>

<div data-bind="ifnot: selectedMeal">No selection</div>

<p>Make a selection, click on refresh and notice the selection is lost when new data arrives.</p>

的缺点 选项值

注意我是如何重写 with 结合?突然间,我们只有一个 meal 的属性在我们的ViewModel中可用,这是非常有限的。如果你希望你的应用能够更新数据,你需要在这里做一些额外的工作。您的两个选项:

1. 存储所选内容的字符串(哈希) 和 独立的实际对象,或
2. 拥有一个视图模型的存储库,当新的服务器数据到达时,映射到现有实例以确保保持选择状态。

_{如果有帮助,我可以添加代码片段来更好地解释这两种方法}

好的,在浏览完淘汰代码之后,我已经知道发生了什么事情——到编写代码的时候,这还没有记录下来。

这个 value 绑定,当它读取 select 元素,不只是查看元素的DOM值; it calls var elementValue = ko.selectExtensions.readValue(element);

现在,什么 selectExtensions 不出所料,是否为 选择 (还有他们的孩子 object )元素。这就是魔法发生的地方,因为正如代码中的注释所说:

    // Normally, SELECT elements and their OPTIONs can only take value of type 'string' (because the values
    // are stored on DOM attributes). ko.selectExtensions provides a way for SELECTs/OPTIONs to have values
    // that are arbitrary objects. This is very convenient when implementing things like cascading dropdowns.

因此,当值绑定尝试读取 选择 要素 via selectExtensions.readValue(...) ,将出现以下代码:

        case 'select':
            return element.selectedIndex >= 0 ? ko.selectExtensions.readValue(element.options[element.selectedIndex]) : undefined;

这基本上是说“好的,找到选定的索引,然后再次使用此函数读取 option 该索引处的元素。所以它读到 选项 元素并得出以下结论:

        case 'option':
            if (element[hasDomDataExpandoProperty] === true)
                return ko.utils.domData.get(element, ko.bindingHandlers.options.optionValueDomDataKey);
            return ko.utils.ieVersion <= 7
                ? (element.getAttributeNode('value') && element.getAttributeNode('value').specified ? element.value : element.text)
                : element.value;

啊哈!因此,它存储自己的“has dom data expando property”标志,如果设置了该标志,则不会得到简单的 element.value 但它会进入自己的javascript内存并获取值。这就是它如何返回复杂的JS对象(如我问题示例中的MEAT对象),而不仅仅是 价值 属性字符串。但是,如果没有设置该标志,它实际上只是返回 价值 属性字符串。

这个 writeValue 可以预见,扩展的另一面是,如果复杂数据不是字符串,它会将其写入JS内存,否则它只会将其存储在 价值 的属性字符串 选项 :

    switch (ko.utils.tagNameLower(element)) {
        case 'option':
            if (typeof value === "string") {
                ko.utils.domData.set(element, ko.bindingHandlers.options.optionValueDomDataKey, undefined);
                if (hasDomDataExpandoProperty in element) { // IE <= 8 throws errors if you delete non-existent properties from a DOM node
                    delete element[hasDomDataExpandoProperty];
                }
                element.value = value;
            }
            else {
                // Store arbitrary object using DomData
                ko.utils.domData.set(element, ko.bindingHandlers.options.optionValueDomDataKey, value);
                element[hasDomDataExpandoProperty] = true;

                // Special treatment of numbers is just for backward compatibility. KO 1.2.1 wrote numerical values to element.value.
                element.value = typeof value === "number" ? value : "";
            }
            break;

所以是的,正如我所怀疑的,knockout在后台存储复杂的数据,但只有当您要求它存储复杂的JS对象时。这就解释了为什么,当您不指定 optionsValue: [someStringValue] ,您的计算函数接收到复杂的用餐对象,而当您指定它时,您只需获得传入的基本字符串—knockout只是从 选项 的 价值 属性。

就我个人而言,我认为这应该被清楚地记录下来,因为这是一个有点出乎意料和特殊的行为,可能会让人困惑,即使这很方便。我将要求他们将其添加到文档中。