Question

我需要从 couchdb json 数据中显示来自属性和 implements 的嵌套数据。

我设法用JavaScript来隐藏和显示我选择的所选div，但它只显示在第一行。其他行不受影响。也许我的JavaScript遇到了一些问题，或者我的foreach来自淘汰赛。“

如果所选选项是属性，则显示其上的属性数据。

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

对于工具：

TypeName: "ITSR2.Bricks.Access.IAccessBrick"

不是同时btw：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);

我的数据在控制台上的显示截图：

Screen with data on my console

我创建了2 Div用我的javascript显示它们

任何帮助表示赞赏

Answer 1

您的foreach很好，但您处理表单数据的方法不是Knockout方式。您应该更改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 中，以及其他一些建议的更改。

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

1 个答案: