如何使用 json 和 knockoutjs 创建一个主详细信息级联下拉菜单？

Question

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

int id
string Name
List<Driver> Drivers

，其中驱动程序也有 ID 和名称。 从服务器上的 MVC Action 以 JSON 形式返回。

现在我有一个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 对象。

尝试删除 ServerId 选择中的 optionsValue: 'Id' ：

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