javascript - knockout : changing options in select list without clearing value in view-model

Question

我有一个基于 Knockout JS 的问题，其中包含一些级联选项列表并切换出它们相关的底层“事件”对象。

我创建了一个 jsfiddle来证明问题。

我有一个 UI，用户可以在其中编辑主“标题”记录并添加/删除/编辑子记录。有一个用于编辑子记录的中心区域。想法是点击表格中的子记录，这将成为中间区域正在编辑的记录。

我遇到的问题是因为第二个下拉列表中的内容列表会根据第一个下拉列表发生变化。这很好，直到事件记录发生变化。如果类别因事件记录更改而更改，则“事物”列表也会更改。此时，新事件子记录上所选的“事物”(第二个下拉列表)被清除。

我假设新事件记录上的值发生变化，但由于它没有出现在旧列表中(如果类别发生变化)而被清除。然后更改项目列表本身(包括适当的值)，但此时该值已经从 View 模型中消失。

(我意识到这是一个冗长的解释，希望 jsfiddle 能说清楚)

如何在不丢失所选值的情况下更改下拉列表中的项目列表和 View 模型中的所选值？

HTML:

<label>Some header field</label>
<input type="text" id="txtSomeHeaderField" data-bind="value: HeaderField" />

<fieldset>
    <legend>Active Child Record</legend>

    <label>Category</label>
    <select id="ddlCategory" data-bind="options: categories, value: ActiveChildRecord().Category, optionsCaption:'Select category...'" ></select>

    <label>Things</label>
    <select id="ddlThings" data-bind="options: ThingsList, value: ActiveChildRecord().Favorite, optionsCaption:'Select favorite thing...'" ></select>
</fieldset>

<button data-bind="click: AddChildRecord" >Add a child record</button>

<table id="tblChildRecords" border>
    <thead>
        <tr>
            <th>Category</th>
            <th>Favorite Thing</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: ChildRecords">
        <tr data-bind="click: ChildRecordClicked, css: {activeRow: ActiveChildRecord() === $data}" >
            <td data-bind="text: Category"></td>
            <td data-bind="text: Favorite"></td>
        </tr>
    </tbody>
</table>

<p>Steps to reproduce problem:</p>
<ol>
    <li>Click "Add child record"</li>
    <li>Click on that row to make it the "active" record</li>
    <li>Choose category "Pets" and thing "Dog"</li>
    <li>Click "Add child record"</li>
    <li>Click on the new row to make it the "active" record</li>
    <li>Choose category "Colours" and thing "Blue"</li>
    <li>Now click back on the first row... <strong>"Dog" disappears!</strong></li>
</ol>

Javascript:

var categories = ["Pets", "Colours", "Foods"];

var MyViewModel = function(){
    var _this = this;

    this.HeaderField = ko.observable("this value is unimportant");
    this.ChildRecords = ko.observableArray([]);
    this.ActiveChildRecord = ko.observable({ Category: ko.observable("-"), Favorite: ko.observable("-")});    
    this.ThingsList = ko.observableArray();

    this.AddChildRecord = function(){
        _this.ChildRecords.push({ Category: ko.observable("-"), Favorite: ko.observable("-")});
    }

    this.ChildRecordClicked = function(childRecord){
        _this.ActiveChildRecord(childRecord);
    }

    this.RefreshThingsList = ko.computed(function(){
        var strActiveCategory = _this.ActiveChildRecord().Category();
        switch(strActiveCategory){
            case "Pets": _this.ThingsList(["Dog", "Cat", "Fish"]); break;      
            case "Colours": _this.ThingsList(["Red", "Green", "Blue", "Orange"]); break;
            case "Foods": _this.ThingsList(["Apple", "Orange", "Strawberry"]); break;
        }        

    });
}

ko.applyBindings(MyViewModel);

Answer 1

Knockout 的 valueAllowUnset 绑定(bind)可能是一种更简洁的方法。

http://jsfiddle.net/5mpwx501/8/

<select id="ddlCategory" data-bind="options: categories, value: ActiveChildRecord().Category, valueAllowUnset: true, optionsCaption:'Select category...'" ></select>
<select id="ddlThings" data-bind="options: ThingsList, value: ActiveChildRecord().Favorite, valueAllowUnset: true, optionsCaption:'Select favorite thing...'" ></select>

@super cool 是 100% 正确的，但未定义的原因是当您单击宠物行时 ActiveChildRecord 发生变化，但此计算函数尚未执行，因此您有一个狗 是最爱的小时间范围，但选项仍然是颜色。由于 Dog 不是一个选项，下拉菜单会将 ActiveChildRecord 上的 Favorite 属性设置为未定义。

我会使用 valueAllowUnset 绑定(bind)。基本上它告诉下拉列表，如果没有匹配项，请不要将我的值设置为未定义，而是等待，因为选项可能正在更新。

使用此绑定(bind)的一个很好的副作用是，当您添加新的子记录时，它不会复制前一行。它自然会为您重置选择。