如何用json和knockoutjs创建主详细级联下拉菜单？

Question

一个简单的主细节的场景： 服务器

int id 
string Name 
List<Driver> Drivers 

其中驱动器还具有ID和名称的列表。 作为JSON从服务器上的MVC Action返回。

现在我有一个knockoutjs模型

var ViewModel; 
    var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 
    ViewModel = { 
    IpAddress: ko.observable($("#IpAddress").val()), 
    Servers: ko.observableArray([]), 
    SelectedServer: ko.observable() 
    }; 
    ViewModel.ValidIp = ko.dependentObservable(function() { 
    return /^(([2]([0-4][0-9]|[5][0-5])|[0-1]?[0-9]?[0-9])[.]){3}(([2]([0-4][0-9]|[5][0-5])|[0-1]?[0-9]?[0-9]))$/i.exec(this.IpAddress()); 
    }, ViewModel); 
    ViewModel.GetSnmpData = ko.dependentObservable(function() { 
    if (this.lastSnmpRequest) { 
     this.lastSnmpRequest.abort(); 
    } 
    if (this.ValidIp()) { 
     return this.lastSnmpRequest = $.ajax({ 
     url: GetPrinterDataUrl, 
     type: "POST", 
     data: { 
      IpAddress: this.IpAddress() 
     }, 
     success: __bind(function(data) { 
      this.Servers(data.Servers); 

     }, this) 
     }); 
    } 
    }, ViewModel); 
    ko.applyBindings(ViewModel); 

和一些绑定

<input name="IpAddress" id="IpAddress" type="text" data-bind="value: IpAddress ,valueUpdate: 'afterkeydown'" value=""/> 
<select name="ServerId" id="ServerId" data-bind="options: Servers,optionsText:'Name' ,optionsValue:'Id', value: SelectedServer" /> 
<select name="DriverId" id="DriverId" data-bind="options: SelectedServer()? SelectedServer().Drivers: null,optionsText:'Name',optionsValue:'Id'"> 

问题是：服务器下拉被填充，而司机没有。 我肯定错过了一些东西。也许我需要使用映射插件？

Answer 1

SelectedServers（）返回server.Id而不是server对象。

尝试删除optionsValue: 'Id'在SERVERID选择：

<input name="IpAddress" id="IpAddress" type="text" data-bind="value: IpAddress ,valueUpdate: 'afterkeydown'" value=""/> 
<select name="ServerId" id="ServerId" data-bind="options: Servers, optionsText:'Name', value: SelectedServer"></select> 
<select name="DriverId" id="DriverId" data-bind="options: SelectedServer()? SelectedServer().Drivers: null,optionsText:'Name',optionsValue:'Id'"></select>