Knockout.js 如何使可视绑定正常工作

我正在试验Knockout.js，当返回一个空数组时，无法使

可见

绑定在以下代码中工作（以下是它的用法）：

$（document）.ready（）
{
BuildFactoryGrid（）；
}
函数BuildFactoryGrid（）
{
var factoryViewModel=新的factoryViewModel（）；
应用绑定（factoryViewModel）；
factoryViewModel.init（）；
}
函数FactoryViewModel（）
{
var self=这个；
self.FactoryRecords=ko.observearray（[]）；
self.FactoryRecordsLength=ko.computed（函数（）
{
返回self.FactoryRecords（）.length；
});
self.init=函数（）
{
self.FactoryRecords（GetFactoryData（））；
};
}
函数GetFactoryData（）
{
变量objArr=
[
{
地区:1,，
部门:22,，
组别：33
},
{
地区:1,，
部门：24，
组别：35
},
{
地区:2,，
部门：54，
组别：9
},
];
返回objArr；
//return[]；//删除注释以返回空数组
}

tr>th，td{
文本对齐：居中；
垂直对齐：中间对齐；
}

地区
部门
团队
没有记录

如果您这样做

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

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

将填充数组，并且

FactoryRecordsLength（）。长度将为3

如果你这样做

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

//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
  },
];

“无记录”块嵌套在
foreach
绑定中，如果没有可循环的记录，则不会绘制该绑定。您必须将“No Records”移出foreach绑定上下文，为此，您需要将
foreach
移动到虚拟元素，而不是
元素

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


没有记录
您的可见绑定“不起作用”，因为您在foreach内部使用它。由于绑定到foreach的FactoryRecords没有元素，因此不会生成任何元素，也不会调用可见绑定

只需修复标记并分离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>


地区
部门
团队
没有记录