Javascript 淘汰：更改选择列表中的选项而不清除视图模型中的值

我有一个基于击倒JS的问题，一些级联选项列表和切换出它们相关的底层“活动”对象

我创建了一个示例来演示这个问题

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

我遇到的问题是，第二个下拉列表中的内容列表会根据第一个下拉列表而变化。在活动记录更改之前，这是正常的。如果类别因活动记录的更改而更改，则“内容”列表也会更改。此时，将清除新活动子记录上所选的“对象”（第二个下拉列表）

我假设新活动记录上的值发生了变化，但是被清除了，因为它没有出现在旧列表中（如果类别发生了变化）。然后更改项目列表本身（包括适当的值），但此时该值已经离开视图模型

（我意识到这是一个相当冗长的解释，希望这个解释能说清楚）

如何更改下拉列表中的项目列表和视图模型中的选定值，而不丢失沿途的选定值

HTML:

---

嗯，我对你的小提琴做了一个小小的修改，效果很好

查看模型：

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);
    });

工作小提琴

---

万一您正在寻找其他内容，请告诉我们。

Knockout的valueAllowUnset绑定可能是一种更干净的方法

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

我会使用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>

几点注意：

• 使用了一个名为“editedRecord”的新可观察对象。这可以保存当前编辑记录的值（新的，或者通过单击它来选择），或者如果不应编辑任何内容，则保存空值（此值在

  AddChildRecord

  和

  ChildrecordClicked

  中设置，以避免列表更新时发生更改）
• 有一个

  类别数组

  ，一个

  类别

  可观察，以及一个更新内容列表以及已编辑记录的类别属性（如果存在）的订阅
• 有一个

  事物

  数组，一个

  事物

  可观察，以及一个更新已编辑记录的事物属性（如果存在）的订阅

• 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);
}

---

包含在中，但如果您应用了一种样式，使表格单元格具有最小高度，并使其保持为空，则会更好，就像在上一版本中一样。

修改了您的小提琴，您正在寻找这一精彩的作品，谢谢！我想我今天早些时候可能已经很快地读到了淘汰网站上的“valueAllowUnset”绑定，但显然没有正确地理解它。谢谢你指给我看，非常感谢。这是最简单、最干净、最直接的解决方案，因此我将此作为答案。感谢@supercol也提供了一个极好的答案。@kyle这是一个恰当的答案&避免了额外的逻辑<代码>+1谢谢你提醒我。很抱歉我不能给出+1，我甚至想给出-1。不过我不会这么做，因为这对你提到的AllowUnset的价值感兴趣。有一个重要的、危险的副作用，必须加以考虑并以某种方式加以纠正：如果您单击“添加一个儿童记录”，单击该行选择它，然后选择宠物/猫，就可以了。但是如果在那一刻你改变了主意，选择了“颜色”，你就得到了错误的“颜色/猫”组合哦哦哦！！！！你无法控制它。另一方面，我的解决方案是唯一一个添加空记录并自动选择它进行编辑的解决方案，同时重置两个列表。尽管我坚持认为在

observearray

之外编辑新记录总是更好的，这样用户就有机会接受或取消它。如果他接受它（隐式地，通过离开编辑器，或显式地，向用户提供一个按钮），也可以在将其添加到

ObservalArray

（或repla）之前对其进行验证

<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>

<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>

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);

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);
}