Javascript 检查我的嵌套数据是否存在并显示div，否则使用KnockoutJS显示其他div

我想检查

Properties.Properties

或

Implement.Interfaces

上的项目是否存在，并用它显示div，如果不存在，我想用它没有的信息显示div

我用select输入显示所选的div，它只为获取信息而工作良好

我用

if

anf

ifnot

语句尝试了一些doucmentation的解决方案，但并没有奏效

控制台上我的数据的图像： 这是我的型号：

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



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

  self.selectDivs2 = ko.observableArray(['Properties', 'Requires']);
  self.selectedDiv2 = ko.observable();

}

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);
});
db.query("InvestigatorInfos/docs").then(function(result) { 
  var data = result;
  console.log(data);
  vm.investigator(data.rows);
});

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

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

ko.applyBindings(vm);

<div id="tab1" class="col s12">
            <ul class="collapsible" data-collapsible="accordion" data-bind="foreach:myfield">
                <li  data-bind="with: value">
                  <div class="collapsible-header">
                    <i class="material-icons">view_stream</i>
                    <p class="blue-text" data-bind="text: TypeName"></p>
                  </div>
                    <div class="collapsible-body"> 
                      <p class="style_p_row" ><b>AssemblyName:</b> <span data-bind="text: AssemblyName"></span></p>
                      <!-- ko if: Description -->
                       <p class="style_p_row" ><b>Description:</b> <span data-bind="text: Description"></span></p>
                      <!-- /ko -->
                      <p class="style_p_row" ><b>Name: </b><span data-bind="text: Name"></span></p>
                      <p class="style_p_row" ><b>Obsolete: </b><span data-bind="text: Obsolete"></span></p>
                      <p class="style_p_row" ><b>TypeName: </b><span data-bind="text: TypeName"></span></p>
                       <div class="row">
                          <form class="col s12">
                                <div class="row">
                                  <div class="col s12 m12">
                                    <div class="col s12 m4 padding_select">
                                      <select class="browser-default " 
                                      data-bind="options: $root.selectDivs,
                                                value: $root.selectedDiv,
                                                optionsCaption: 'Choose...'">
                                      </select>
                                    </div><!-- end col s6 -->
                                    <div class="col s6 m6" >
                                       <div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
                                       <!-- ko if: Properties.Properties -->
                                        <p class="blue-text padding_p">Properties</p>
                                        <ul data-bind="foreach: Properties.Properties">
                                          <li>
                                          <b>Converter: </b><span data-bind="text: Converter"></span></br>
                                          <b>Name:</b> <span data-bind="text: Name"></span></br>
                                          <b>Validation Type: </b><span data-bind="text: ValidationType"></span></br></br>

                                          </li>
                                        </ul>
                                        <!-- /ko -->
                                      </div>
                                      <div data-bind="visible: $root.selectedDiv() == 'Implements'" id="Implements">
                                        <p class="blue-text padding_p">Implements Interfaces</p>
                                        <ul data-bind="foreach: Implements.Interfaces">
                                          <li><b>TypeName:</b> <span data-bind="text: $data.TypeName"></span><br></li>
                                        </ul>
                                      </div>
                                    </div>
                                    </div><!-- end col s6 -->
                                  </div>
                                </div> 
                          </form>
                        </div><!-- end row -->
                    </div>
                </li>
            </ul>
          </div>

和我的索引：

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



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

  self.selectDivs2 = ko.observableArray(['Properties', 'Requires']);
  self.selectedDiv2 = ko.observable();

}

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);
});
db.query("InvestigatorInfos/docs").then(function(result) { 
  var data = result;
  console.log(data);
  vm.investigator(data.rows);
});

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

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

ko.applyBindings(vm);

<div id="tab1" class="col s12">
            <ul class="collapsible" data-collapsible="accordion" data-bind="foreach:myfield">
                <li  data-bind="with: value">
                  <div class="collapsible-header">
                    <i class="material-icons">view_stream</i>
                    <p class="blue-text" data-bind="text: TypeName"></p>
                  </div>
                    <div class="collapsible-body"> 
                      <p class="style_p_row" ><b>AssemblyName:</b> <span data-bind="text: AssemblyName"></span></p>
                      <!-- ko if: Description -->
                       <p class="style_p_row" ><b>Description:</b> <span data-bind="text: Description"></span></p>
                      <!-- /ko -->
                      <p class="style_p_row" ><b>Name: </b><span data-bind="text: Name"></span></p>
                      <p class="style_p_row" ><b>Obsolete: </b><span data-bind="text: Obsolete"></span></p>
                      <p class="style_p_row" ><b>TypeName: </b><span data-bind="text: TypeName"></span></p>
                       <div class="row">
                          <form class="col s12">
                                <div class="row">
                                  <div class="col s12 m12">
                                    <div class="col s12 m4 padding_select">
                                      <select class="browser-default " 
                                      data-bind="options: $root.selectDivs,
                                                value: $root.selectedDiv,
                                                optionsCaption: 'Choose...'">
                                      </select>
                                    </div><!-- end col s6 -->
                                    <div class="col s6 m6" >
                                       <div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
                                       <!-- ko if: Properties.Properties -->
                                        <p class="blue-text padding_p">Properties</p>
                                        <ul data-bind="foreach: Properties.Properties">
                                          <li>
                                          <b>Converter: </b><span data-bind="text: Converter"></span></br>
                                          <b>Name:</b> <span data-bind="text: Name"></span></br>
                                          <b>Validation Type: </b><span data-bind="text: ValidationType"></span></br></br>

                                          </li>
                                        </ul>
                                        <!-- /ko -->
                                      </div>
                                      <div data-bind="visible: $root.selectedDiv() == 'Implements'" id="Implements">
                                        <p class="blue-text padding_p">Implements Interfaces</p>
                                        <ul data-bind="foreach: Implements.Interfaces">
                                          <li><b>TypeName:</b> <span data-bind="text: $data.TypeName"></span><br></li>
                                        </ul>
                                      </div>
                                    </div>
                                    </div><!-- end col s6 -->
                                  </div>
                                </div> 
                          </form>
                        </div><!-- end row -->
                    </div>
                </li>
            </ul>
          </div>

查看流

组件名称：

描述：

名称：

过时：
类型名称：

属性



转换器：

姓名：

验证类型：




实现接口

类型名称：

您的HTML似乎引用了视图模型中不存在的可观察对象

比如说,

<p class="style_p_row" ><b>Obsolete: </b><span data-bind="text: Obsolete"></span></p>
<p class="style_p_row" ><b>TypeName: </b><span data-bind="text: TypeName"></span></p>

如果将

TypeName

加载到可观察对象中，则可以更改上面的

return

语句

然后，在视图模型中可以有类似的内容：

<!-- ko if: hasTypeName -->
    YOUR HTML
<!-- /ko -->

你的HTML

您需要更改

if

并在其为空时选中

ifnot

                                   <!-- ko if: Properties.Properties == ''-->
                                     <p class="blue-text padding_p">Properties</p>is nothing set
                                   <!-- /ko -->


                                   <!-- ko ifnot: Properties.Properties == ''-->
                                    <p class="blue-text padding_p">Properties</p>
                                    <ul data-bind="foreach: Properties.Properties">
                                      <li>  
                                      <b>Name:</b> <span data-bind="text: Name"></span></br>        
                                      <b>Converter: </b><span data-bind="text: Converter"></span></br>      
                                      <b>Validation Type: </b><span data-bind="text: ValidationType"></span></br></br>

                                      </li>
                                    </ul>
                                    <!-- /ko -->

属性未设置
属性



名称：

转换器：

验证类型：

---

同样的情况也适用于实现

您在viewmodel中没有

属性

或

实现

成员。如果绑定基于

属性。属性

或

实现。接口

，您希望看到什么？更新了问题，添加了我的数据的图像这里有很多代码与问题无关。有什么方法可以把它提取成可运行的代码段吗？是否显示

if:Properties.Properties

部分？