Как создать каскадные выпадающие списки основных деталей с помощью json и knockoutjs? - PullRequest
Новая
       19

Как создать каскадные выпадающие списки основных деталей с помощью json и knockoutjs?

1 голос
/ 24 августа 2011

Простой сценарий основных деталей: список серверов 

int id
string Name
List<Driver> Drivers

где драйвер также имеет идентификатор и имя. возвращается как 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'">

проблема в том, что выпадающий список серверов заполняется, а драйверы - нет. Я наверняка что-то упустил. Может быть, мне нужно использовать плагин сопоставления?

1 Ответ

0 голосов
/ 24 августа 2011

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