如何使用 json 和 knockoutjs 创建主细节级联下拉菜单？答案

【问题标题】：how can one create a master detail cascading dropdowns with json and knockoutjs?如何使用 json 和 knockoutjs 创建主细节级联下拉菜单？
【发布时间】：2011-11-02 11:39:33
【问题描述】：

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

int id
string Name
List<Driver> Drivers

其中 Driver 也有一个 Id 和 Name。从服务器上的 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'">

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

【问题讨论】：

标签： jquery asp.net-mvc knockout.js master-detail cascadingdropdown

【解决方案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>

【讨论】：