javascript - Breeze/knockout 下拉菜单导致实体被修改

Question

这是我今天遇到的一个有点奇怪的问题。我有一个使用 Breeze 和 Knockout 的应用程序。在我的页面之一上，我允许用户编辑和保存项目数据。仅当进行更改后，保存按钮才会启用。为了跟踪更改，我订阅了 propertyChanged 事件。该页面有很多下拉菜单，导致了一些问题。以下是其中一个下拉菜单的示例。

<div>
    <label for="projQAManager">QA Manager</label>
    <select id="projQAManager" data-bind="options: QAManagers,
                                          optionsText: 'FullName',
                                          optionsValue: 'USERNAME',
                                          optionsCaption: 'None',
                                          value: project().QAManager"></select>
</div>

当project().QAManager 为“”时会出现此问题。项目加载后，propertyChanged 事件就会被触发，并且它显示 QAManager 字段从“”更改为 null。这导致该实体相信它已被修改，尽管实际上没有任何改变。如果 QAManager 已经为空，则一切正常。我想我可以尝试清理数据库并清除所有带有“”的字段，如果必须的话将它们设置为空，但如果可以避免的话我宁愿不这样做。

Answer 1

问题确实在于 KnockoutJS 将值 undefined 分配给列表框的标题，您将其标记为“None”。

填充列表框后，KnockoutJS 会立即检查您选择的值 (project().QAManager) 是否与列表框中列出的任何选项匹配。如果不匹配，它会选择带有标题的选项，这样，列表框的选定值就会被修改，这会触发 project().QAManager 获取 undefined值。

摘自options绑定(bind)处理程序的文档(重点是我的):

KO will prefix the list of items with one that displays the text [caption text] and has the value undefined. So, if myChosenValue holds the value undefined (which observables do by default), then the dummy option will be selected. If the optionsCaption parameter is an observable, then the text of the initial item will update as the observable’s value changes.

我想到了以下解决方法，从最简单到最难，但最“合适”:

1. 解决方法之一是在选项列表 (QAManagers) 中添加一个未定义值的条目，然后再将其作为可观察数组使用。

2. 为选项编写一个自定义绑定(bind)处理程序，允许为标题项设置给定值，而不是将其设置为未定义。这应该包括复制/粘贴 KnockoutJS 的“选项”实现的 99%，并且仅更改我在选项 3 中编写的代码。

3. 更改 KnockoutJS 的源代码，以便考虑新的“optionsCaptionValue”绑定(bind)，如下所示(我已经像您一样修改了原始代码):

       if (allBindings['optionsCaption']) {
           var option = document.createElement("option");
           ko.utils.setHtml(option, allBindings['optionsCaption']);
   
           var captionsValue;
           if (allBindings['optionsCaptionValue']) {
              captionsValue = ko.utils.unwrapObservable(allBindings['optionsCaptionValue']);
           }
           ko.selectExtensions.writeValue(option, captionsValue ? captionsValue : undefined);
           element.appendChild(option);
       }