Question

我有一个基于Knockout JS的问题，带有一些级联选项列表，并切换出底层的＆＃34;活动＆＃34;与它们有关的对象。

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

我有一个用户正在编辑主要＆＃34;标题＆＃34;记录和添加/删除/编辑子记录。有一个用于编辑儿童记录的中心区域。想法是单击表中的子记录，这将成为正在中间区域编辑的记录。

我遇到的问题是由于第二个下拉列表中的事物列表根据第一个下拉列表而改变。在活动记录更改之前，这很好。如果类别发生变化，因为活动记录会更改，那么＆＃34;事物＆＃34;也有变化。在这一点上，所选择的东西＆＃34; <活动子记录上的（第二个下拉列表）已清除。

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

（我意识到这是一个非常冗长的解释，希望jsfiddle能够明确说明）

如何更改下拉列表中的项目列表以及视图模型中的选定值，而不会丢失所选值？

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绑定可能是一种更清洁的方法。

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％正确的，但是它未定义的原因是当你点击pet行时 ActiveChildRecord 会改变，但是这个计算的函数还没有被执行所以你有一个 Dog 是收藏夹的小时间范围，但选项仍为颜色。由于 Dog 不是一个选项，因此下拉列表会将 ActiveChildRecord 上的收藏属性设置为未定义。

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

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

Answer 2

我使用了一种完全不同的方法，使用订阅更新列表和值，以及一个特殊的observable来保存已编辑的记录。

<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'的新observable。如果不应编辑任何内容（此值在AddChildRecord和ChildrecordClicked中设置），则可以保存当前编辑的记录的值（新的，可以通过单击选择）或空值列表更新时，vaoid会发生变化）
有一个categories数组，一个category可观察对象，以及一个更新事物列表的订阅以及已编辑记录的类别属性（如果存在）
有一个things数组，一个thing observable，以及一个更新已编辑记录的thing属性的订阅（如果存在）
addChildRecord，创建一个新的空记录，并将其设置为已编辑的记录。除了初始化类别和事物列表
childRecordClick将点击的记录设为编辑记录

正如您所看到的，使用这种技术，绑定仍然非常简单，您可以完全控制每个时刻的内容。

您可以使用与此类似的技术来取消版本和类似的东西。事实上，我通常在不同的地方编辑记录，并在用户接受后添加或应用更改，允许他取消。

This is your modified fiddle

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

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 version of the fiddle中，但如果你应用了一个样式以便表格单元格具有最小高度，并保持空白，就像在之前的版本中一样，那会更好。

Answer 3

好吧，我对你的小提琴进行了一次小修改，效果很好。

查看型号：

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

工作小提琴 here

万一你要寻找除此之外的东西，请告诉我们。

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

3 个答案: