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

我需要的是显示我的couchdbjson数据中的属性和实现的嵌套数据

我设法用JavaScript从select中隐藏和显示所选的div，但它只在第一行显示它们。其他行不受影响。也许我的JavaScript有问题，或者我的knockout中的

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>

我的数据在控制台上的外观屏幕截图：

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

---

您的

foreach

很好，但您处理表单数据的方法并不是令人失望的。您应该更改

选择

代码以使用淘汰版本，然后让一些JavaScript侦听（

订阅

）以更改该版本

因此，首先，我们将查看视图模型的选项，以及在选择某个对象时设置的属性：

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

然后我们将用以下代码替换您的

选择
code:

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

。。你的另一部分也一样：

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


工具


（注意：
$root
是您的
ViewModel
实例。这是访问数据最顶层父级的方法）

我把所有这些都放在了一个列表中，显示了所有这些，以及一些其他建议的更改。
不清楚您在问什么。请你把问题通读一遍，看看你能不能改进一下。@Muli，很乐意帮忙。主要的收获不是太依赖jQuery风格的web开发，而是将视图视为数据，因此命名为视图模型：）除了文档之外，你知道任何在线学习
KO
的资源吗？@Muli很抱歉这么说
<div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
    <p>Properties</p>

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