Question

我有一组由JSON驱动的四个级联选择框。根据可用的嵌套数据，会出现一个Dropbox，已填充或者没有...除了最后一级之外一切正常。我看不出什么错，但我确定它显而易见...... < / p>

首先是我的绑定..我正在使用“if：...”来确定是否显示下一个级联/嵌套的保管箱...

<select id="cboSpecies" data-bind="options: SearchCriteria.Species, optionsText: 'Name', value: Species, optionsCaption: 'Choose...'"></select>
<div data-bind="if: Species">
  <select data-bind='options: Species().System, optionsText: "Name", optionsCaption: "Select...", value: System'></select>
</div>
<div data-bind="if: System">
  <select data-bind='options: System().Syndrome, optionsText: "Name", optionsCaption: "Select...", optionsValue: "Name", value: Syndrome'></select>
</div>
<div data-bind="if: Syndrome">
  <select data-bind='options: Syndrome().Diagnosis, optionsText: "Name", optionsCaption: "Select...", optionsValue: "Name", value: Diagnosis'></select>
</div>

接下来我的淘汰赛代码：

function SearchModel() {
  this.SearchCriteria = "";
  this.Species = ko.observable();
  this.System = ko.observable();
  this.Syndrome = ko.observable();
  this.Diagnosis = ko.observable();
}

var model = new SearchModel();
model.SearchCriteria = json;

最后是JSON字符串本身..

var json = {
  "Species": [{
    "ID": 3,
    "Name": "Feline",
    "System": []
  }, {
    "ID": 1,
    "Name": "Ovine",     
    "System": []
  }, {
    "ID": 2,
    "Name": "Canine",
    "System": [{
      "ID": 1,
      "Name": "Cardiovascular System",
      "Syndrome": [{
          "ID": 1,
          "Name":"Blood",
          "Diagnosis":[
              {
               "Name": "Diag 1"},
              {
               "Name": "Diag 2"
                  }]
              },
                   {
          "ID": 2,
          "Name": "Heart/Aorta",
          "Diagnosis":[{"Name": "Diag 3"}          
          ]}]
    },{
      "ID": 1,
      "Name": "GI System /Abdomen",
      "Syndrome": [
            {
          "ID": 1,
          "Name":"Abdomen",
          "Diagnosis":[]
            },
           {
          "ID": 2,
          "Name":"Abomasum",
          "Diagnosis":[]
          }]
    }]
  }]  
};

一切正常，直到最后一个没有填充的Dropbox ......

screenshot showing dropbox not populating

我在这里有一个小提琴：

JS FIDDLE

要测试，选择“Canine”，然后选择“Cardiovascular”，然后选择“Blood”。我希望最终的Dropbox有数据“Diag 1”和“Diag 2”

感谢。

Answer 1

optionsValue参数在System选择器中是多余的：

<div data-bind="if: System">
  <select data-bind='options: System().Syndrome, optionsText: "Name", optionsCaption: "Select...", value: Syndrome'></select>
</div>

Fixed JSFiddle DEMO

Answer 2

您需要在optionsValue: "Name"选择中删除Syndrome（并且没有理由在Diagnosis选择中删除它。问题是，如果optionsValue的{{1}}为Syndrome，则"Name"指向每个optionsValue的{{1}}属性。该字符串属性没有string成员。因此，您尝试将Syndrome选项绑定到Diagnosis，这会导致Diagnosis选择没有选项。

KnockoutJS - 选择/保存框未填充

2 个答案: