在淘汰赛中预选下拉列表项

Question

我正在尝试通过下拉列表更新对象上预先存在的属性。该解决方案使用了 knockout 和 ko.mapping 框架来获取其数据。我遇到的问题是选择现有对象已经设置的列表中的项目。

例如：如果下拉列表包含 2 个选项，假设第一个男性和第二个女性，并且它所代表的属性已经设置为女性，我希望下拉列表选择女性。但下拉列表默认为列表中的第一项（男性）并将底层对象更新为男性。

我已经完成了上述的一个简单示例，我已经模拟了数据以匹配我正在处理的内容，即来自服务器的 json 使用 ko.mapping 框架进行映射。

视图模型

var listItems = '[{"id": "1","name": "male"},{"id": "2","name": "female"}]';
var savedRecord = '{"gender": {"id": "2","name": "female"}}';

ViewModel = function () {
    mappedListItems = ko.mapping.fromJSON(listItems);
    mappedSavedRecord = ko.mapping.fromJSON(savedRecord);
}

ko.applyBindings(new ViewModel());

html

<select data-bind="options: mappedListItems, 
               optionsText: 'name',                    
               value: mappedSavedRecord.gender"></select>
<p>mappedSavedRecord.gender.name = <span data-bind="text: mappedSavedRecord.gender.name"></span>

JsFiddle

http://jsfiddle.net/tgriley1/tLHhE/

Answer 1

您没有告诉 Knockout 将哪个字段用于下拉列表中的 value 属性，也没有告诉它保存记录中的哪个字段用于预选选项：

<select data-bind="options: mappedListItems, 
                   optionsText: 'name',
                   optionsValue: 'id',                                      
                   value: mappedSavedRecord.gender.id"></select>