如何使可見結合工作

Question

我與Knockout.js試驗，並且不能使visible結合下面的代碼工作返回一個空數組時（這裏是其fiddle）：

$(document).ready() 
 
{ 
 
    BuildFactoryGrid(); 
 
} 
 

 
function BuildFactoryGrid() 
 
{ 
 
    var factoryViewModel = new FactoryViewModel(); 
 
    ko.applyBindings(factoryViewModel); 
 
    factoryViewModel.init(); 
 
} 
 

 
function FactoryViewModel() 
 
{ 
 
    var self = this; 
 
    self.FactoryRecords = ko.observableArray([]); 
 
    self.FactoryRecordsLength = ko.computed(function() 
 
    { 
 
     return self.FactoryRecords().length; 
 
    }); 
 

 
    self.init = function() 
 
    { 
 
     self.FactoryRecords(GetFactoryData()); 
 
    }; 
 
} 
 

 
function GetFactoryData() 
 
{ 
 
    var objArr = 
 
    [ 
 
     { 
 
     District: 1, 
 
     Department: 22, 
 
     Team: 33 
 
     }, 
 
     { 
 
     District: 1, 
 
     Department: 24, 
 
     Team: 35 
 
     }, 
 
     { 
 
     District: 2, 
 
     Department: 54, 
 
     Team: 9 
 
     }, 
 
    ]; 
 
    return objArr; 
 
    // return []; // remove comment to return an empty array 
 
}

tr>th, td { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table class="table table-bordered table-condensed hover"> 
 
    <thead> 
 
     <tr class="active"> 
 
      <th></th> 
 
      <th>District</th> 
 
      <th>Department</th> 
 
      <th>Team</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: FactoryRecords"> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" /> 
 
      </td> 
 
      <td data-bind="text: District"></td> 
 
      <td data-bind="text: Department"></td> 
 
      <td data-bind="text: Team"></td> 
 
     </tr> 
 
     <tr data-bind="visible: $parent.FactoryRecordsLength() == 0 "> 
 
      <td colspan="4">No Records</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

當返回一個空數組，「無記錄」 span應該出現，但事實並非如此。很高興明白爲什麼。

Answer 1

你的「無記錄」塊嵌套在一個foreach綁定，這將不如果繪製有沒有記錄可以循環。您必須將「無記錄」移出foreach綁定上下文，爲此，您需要將foreach移動到虛擬元素而不是<tbody>元素。

<tbody> 
    <tr data-bind="visible: FactoryRecordsLength() == 0 "> 
     <td colspan="4">No Records</td> 
    </tr> 
    <!--ko foreach: FactoryRecords--> 
    <tr> 
     <td> 
     <input type="checkbox" /> 
     </td> 
     <td data-bind="text: District"></td> 
     <td data-bind="text: Department"></td> 
     <td data-bind="text: Team"></td> 
    </tr> 
    <!--/ko--> 
    </tbody> 

Answer 2

如果你

return objArr; 
// return []; // remove comment to return an empty array 

陣列將被填充，FactoryRecordsLength().length將3

如果你

//return objArr; 
return []; // remove comment to return an empty array 

在foreach綁定將什麼都沒有顯示，你不會看到你桌子上的任何東西。

理想情況下，你應該添加另一條記錄到你的對象，以確定是否有記錄，例如：

var objArr = 
[ 
    { 
    District: 1, 
    Department: 22, 
    Team: 33, 
    Records: 0 
    }, 
    { 
    District: 1, 
    Department: 24, 
    Team: 35, 
    Records: 1 
    }, 
    { 
    District: 2, 
    Department: 54, 
    Team: 9, 
    Records: 0 
    }, 
]; 

Answer 3

你可見結合，因爲你用它裏面的foreach 「不工作」。並且由於您的工廠記錄綁定到foreach沒有元素 - 將不會生成任何元素，並且您的可見的綁定將不會被調用。

只是解決您的標記和獨立的foreach和默認的行：

<table class="table table-bordered table-condensed hover"> 
    <thead> 
    <tr class="active"> 
     <th></th> 
     <th>District</th> 
     <th>Department</th> 
     <th>Team</th> 
    </tr> 
    </thead> 
    <tbody> 
    <!-- Foreach generate elements if they are exists --> 
    <!-- ko foreach: FactoryRecords --> 
    <tr> 
     <td> 
     <input type="checkbox" /> 
     </td> 
     <td data-bind="text: District"></td> 
     <td data-bind="text: Department"></td> 
     <td data-bind="text: Team"></td> 
    </tr> 
    <!-- /ko --> 
    <!-- If no elements present - create our row with message --> 
    <tr data-bind="visible: FactoryRecordsLength() === 0 "> 
     <td colspan="4">No Records</td> 
    </tr> 
    </tbody> 
</table>