使用 KnockoutJS 在选择选项上显示嵌套数据

Question

我需要的是显示来自 properties 的嵌套数据和来自我的 couchdb json 数据的 implements 的嵌套数据。

我设法使用 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 文件与 viewModel 以及我如何检索我的 数据：

 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 实例。这是访问数据最顶层父级的方式）

我已将所有这些都放在一个 working example 中，它显示了所有这些以及其他一些建议的更改。