使用KnockoutJS在select選項上顯示嵌套數據

Question

我需要的是從我的CouchDB的 JSON數據顯示，從性能 ，並實現了嵌套數據。

我設法用JavaScript做到了這一點，以隱藏並顯示所選內容中的選定div，但是它僅將它們顯示在第一行。 其他行不受影響。 也許我的JavaScript出現問題，或者我從淘汰賽獲得的foreach位置不正確。

如果選擇的選項是“屬性”，則在其上顯示屬性數據。

Converter: 8
Description: ""
EnumTypeName: ""
Name: "MainFile"
ValidationType: 4

對於工具：

TypeName: "ITSR2.Bricks.Access.IAccessBrick"

順便說一句：P。

我搜索並查看了淘汰賽的文檔，但找不到任何東西。

這是我的索引 ：

<ul class="collapsible" data-collapsible="accordion" data-bind="foreach:myfield">
      <li  data-bind="with: value">
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>
        <p data-bind="text: Name"></p>
        </div>
          <div class="collapsible-body">
          <p data-bind="text: TypeName"></p>
          <p data-bind="text: AssemblyName"></p>
             <div class="row">
                  <form class="col s12">
                    <div class="row">
                      <div class="col s6 m6">
                        <div class="col s6 m6">
                            <label>Select</label>
                            <select class="browser-default" onchange="showDiv(this)">
                              <option value="" disabled="" selected="">Choose your option</option>
                              <option value="Properties">Properties</option>
                              <option value="Implements">Implements</option>
                            </select>
                        </div><!-- end col s6 -->
                        <div class="col s6 m6" >
                        <div id="Properties" style="display: none;">
                        <p>Properties</p>
                          <ul data-bind="foreach: Properties.Properties">
                            <b>Name:</b> <span data-bind="text: $data.Name"></span></br>
                            <b> Validation Type: </b><span data-bind="text: $data.ValidationType"></span></br>
                          </ul>
                        </div>
                        <div id="Implements" style="display: none;">
                        <p>Implements</p>
                           <ul data-bind="foreach: Implements.Interfaces">
                            <b>Name:</b> <span data-bind="text: $data.TypeName"></span></br>
                          </ul>
                        </div>
                        </div><!-- end col s6 -->
                      </div>
                    </div>
              </div>
          </div>
      </li>
    </ul>
    </div>

我Main.Js文件， 視圖模型 ，我怎么找回我的數據 ：

 function showDiv(elem){
   if(elem.value == 'Properties'){
    document.getElementById('Properties').style.display = "block";
    document.getElementById('Implements').style.display = "none";
  } 
  else if(elem.value == 'Implements'){
      document.getElementById('Properties').style.display = "none";
      document.getElementById('Implements').style.display = "block";
  }
  else{
      document.getElementById('Properties').style.display = "none";
      document.getElementById('Implements').style.display = "none";
  }
}

function ViewModel() {
  var self = this;
  self.myfield =  ko.observableArray([]);


}

var db = new PouchDB('http://localhost:5984/helloworld');

var vm = new ViewModel();

db.query("bricksetup/docs").then(function(result) { 
  var data = result;
  console.log(data);
  vm.myfield(data.rows);


  //data.rows.forEach(function(row){
      //vm.data.push(row.value)
 // })
   //vm.myfield(data.rows[3].value.Name);
});

ko.applyBindings(vm);

屏幕截圖顯示我的數據在控制台上的顯示方式：

我創建了2 Div來用我的JavaScript顯示它們

任何幫助表示贊賞

Answer 1

您的foreach很好，但是處理表單數據的方法不是淘汰賽。 您應該更改select代碼以使用刪除版本，然后對它進行一些JavaScript偵聽（ subscribe ）。

因此，首先我們將對視圖模型的選項進行長時間的介紹，其中包含在選擇某些內容時設置的屬性：

self.selectDivs = ko.observableArray(['Properties', 'Implements']);
self.selectedDiv = ko.observable();

然后，我們將用以下代碼替換您select代碼：

<select class="browser-default" data-bind="options: $root.selectDivs,
                                                    value: $root.selectedDiv,
                                                    optionsCaption: 'Choose...'"></select>

基本上，這是在選擇某些東西時設置self.selectedDiv值。

下一步是僅在選擇相應選項時顯示div。 這是通過使用visible綁定完成的：

<div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
    <p>Properties</p>

..和其他部分相同：

<div data-bind="visible: $root.selectedDiv() == 'Implements'" id="Implements">
    <p>Implements</p>

（注意： $root是您的ViewModel實例。這是訪問數據的最高父級的方法）

我將所有這些都放在一個工作示例中 ，該示例顯示了所有這些以及其他一些建議的更改。