檢查我的嵌套數據是否存在並顯示div，否則用KnockoutJS顯示其他div

Question

我想檢查我的Properties.Properties或上的項目是否存在，並顯示div，如果不是，我想顯示帶有信息的div沒有。

我顯示所選的div與選擇輸入，它工作正常的信息。

我嘗試了一些解決方案，使用if anf ifnot聲明但不起作用。

我在控制檯上的數據的圖像： 這裏是我的型號：

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> 

Answer 1

您需要更改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 --> 

也是一樣器具

Answer 2

你的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> 

我看既不Obsolete也不TypeName在您的客戶端視圖模型。我做看到TypeName在從服務器的數據，但這是不相同的數據，這是給予敲除渲染。

所以我的第一個建議是'同步'你的視圖模型和你的HTML視圖之間的可觀察性。

我的第二個建議是在您的視圖模型上顯示屬性，例如hasTypeName。

self.hasTypeName = ko.computed(function() { 

    var imps = self.Implements;   

    return imps && imps.Interfaces && imps.Interfaces.TypeName && imps.Interfaces.TypeName.length; 

}); 

如果加載TypeName到可觀察到的，那麼你可以改變上面return聲明。

然後，您可以在您的視圖模型是這樣的：

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