挖空:在不清除视图模型中的值的情况下更改选择列表中的选项

Knockout 的值 AllowUnset 绑定可能是一种更干净的方法。

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酷是 100% 正确的，但它未定义的原因是当您单击宠物行时 ActiveChildRecord 会发生变化，但此计算函数尚未执行，因此您有一个很小的时间范围，其中 Dog 是收藏夹，但选项仍然是颜色。由于 Dog 不是一个选项，因此下拉列表会将 ActiveChildRecord 上的 Favorite 属性设置为 undefined。

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

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

我使用了一种完全不同的方法，使用订阅来更新列表和值，并使用特殊的可观察值来保存编辑的记录。

<fieldset>
    <legend>Active Child Record</legend>
    <label>Category</label>
    <select id="ddlCategory" 
       data-bind="options: categories, value: category, 
                  optionsCaption:'Select category...'" ></select>
    <label>Things</label>
    <select id="ddlThings" 
       data-bind="options: things, value: thing, 
                  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: editedRecord() === $data}" >
            <td data-bind="text: category"></td>
            <td data-bind="text: thing"></td>
        </tr>
    </tbody>
</table>

JavaScript：

var categories = ["Pets", "Colours", "Foods"];
var MyViewModel = function(){
    var _this = this;
    this.categories = ko.observableArray(["Pets","Colours","Foods"]);
    this.category = ko.observable();
    this.category.subscribe(function(newCategory){
        _this.refreshThings(newCategory);
        if(editedRecord()) {
            editedRecord().category(newCategory);
        }
    });
    this.things = ko.observableArray([]);
    this.thing = ko.observable();
    _this.refreshThings = function(newCategory){
        switch(newCategory){
            case "Pets": _this.things(["Dog", "Cat", "Fish"]); break;      
            case "Colours": _this.things(["Red", "Green", "Blue", "Orange"]); break;
            case "Foods": _this.things(["Apple", "Orange", "Strawberry"]); break;
        }        
    };
    this.thing.subscribe(function(newThing){
        if(editedRecord()) {
            editedRecord().thing(newThing);
        }
    });
    this.childRecords = ko.observableArray([]);
    this.editedRecord = ko.observable();
    this.AddChildRecord = function(){
        var newRecord = {
            category: ko.observable(),
            thing: ko.observable()
        };
        _this.childRecords.push(newRecord);
        _this.editedRecord(newRecord);
        _this.category('');
        _this.thing('');
    }
    this.ChildRecordClicked = function(childRecord){
        _this.editedRecord(null);
        _this.category(childRecord.category())
        _this.thing(childRecord.thing())
        _this.editedRecord(childRecord);
    }    
}
ko.applyBindings(MyViewModel);

几点说明：

• 使用一个名为"editedRecord"的新可观察量。这可以保存当前编辑的记录的值(新建，通过单击它选择(，或者如果不应编辑任何内容，则为 null 值(此值在 AddChildRecord 和 ChildrecordClicked 中设置，以便在更新列表时进行无效更改(
• 有一个数组 categories 、一个可观察category和一个更新事物列表以及编辑记录的类别属性(如果存在(的订阅
• 有一个数组 things 、一个可观察thing和一个更新已编辑记录的事物属性(如果存在(的订阅
• addChildRecord 创建一个新的空记录，并将其设置为已编辑的记录。除了初始化类别和事物的列表
• childRecordClick将单击的记录设置为已编辑的记录

如您所见，使用这种技术，绑定仍然非常简单，您可以完全控制每时每刻发生的事情。

您可以使用与此类似的技术来允许取消版本和类似的事情。事实上，我通常在其他位置编辑记录，并在用户接受更改后添加它或应用其更改，从而允许他取消。

这是你修改的小提琴。

最后，如果要保留未编辑记录上的斜杠，请进行以下更改：

this.AddChildRecord = function(){
    _this.editedRecord(null);
    var newRecord = {
        category: ko.observable("-"),
        thing: ko.observable("-")
    };
    _this.childRecords.push(newRecord);
    _this.category('');
    _this.thing('');
    _this.editedRecord(newRecord);
}

包含在此版本的小提琴中，但最好应用样式以使表格单元格具有最小高度，并将其保留为空，就像在以前的版本中一样。

我在你的小提琴中做了一个小的修改，效果很好.

查看模型：

this.RefreshThingsList = ko.computed(function(){
        var store= ActiveChildRecord().Favorite();
        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;
        }      
        alert(ActiveChildRecord().Favorite()); // debug here you get undefined on your step 7 so store the value upfront and use it .
       ActiveChildRecord().Favorite(store);
    });

在这里工作小提琴

以防万一您正在寻找其他东西，请告诉我们。