KnockoutJS - 选择/保管箱未填充答案

【问题标题】：KnockoutJS - select/dropbox not populatingKnockoutJS - 选择/保管箱未填充
【发布时间】：2014-06-05 03:53:32
【问题描述】：

我有一组由 JSON 驱动的四个级联选择框。根据可用的嵌套数据，会出现一个保管箱，填充与否......除了最后一层外，所有工作正常......我看不出有什么问题，但我确信它很明显......

首先我的绑定..我正在使用“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":[]
          }]
    }]
  }]  
};

一切正常，直到最后一个没有被填充的保管箱......

我这里有一个小提琴：

JS FIDDLE

要进行测试，请选择“犬类”，然后选择“心血管”，然后选择“血液”。我希望最终的 Dropbox 有数据“Diag 1”和“Diag 2”

谢谢。

【问题讨论】：

标签： json knockout.js

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

【讨论】：

击败我 :) 很高兴提到您需要这样做的原因是因为它绑定到“名称”的值而不是对象，并且名称没有“诊断”
非常感谢 IIla，也感谢 PW Pad 和 Timothy！

【解决方案2】：

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

【讨论】：

为什么要投反对票？我的回答是正确的，它更深入地解释了问题所在，而不仅仅是说“optionsValue 是多余的”。这不是多余的，是错误的，我解释了原因。