Question

我正在尝试使用Knockout.js，并且在返回空数组时无法使visible绑定在以下代码中起作用（此处为fiddle }）：

＆＃13;

$(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
}

＆＃13;

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

＆＃13;

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

＆＃13;

当返回一个空数组时，＆＃34; No Records＆＃34;应该出现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

您的可见绑定＆＃34;无法正常工作＆＃34;，因为您在 foreach 中使用它。由于绑定到 foreach 的 FactoryRecords 没有元素 - 因此不会生成任何元素，并且您的可见绑定会赢得＆＃39;永远都叫。

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

Answer 3

如果你这样做

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

如何使可见绑定工作

3 个答案: