Question

在我的页面的aspx中，我有以下Knockout条件：

<tbody id="resultsTable" data-bind="foreach: get_contacts()">
  <!-- ko if: get_xPos() == 0 -->
  <tr>
    <td>
      <span data-bind="text: get_lname()">
      </span>
      , 
      <span data-bind="text:get_fname()">
      </span>

      <br />
      <span data-bind="text: get_email()">
      </span>
      <br />
      <span data-bind="text: get_phone()">
      </span>
      <br />
      <span data-bind="text: get_office()">
      </span>
    </td>

  </tr>
  <!-- /ko -->

</tbody>

此单独使用。如果我在第一个之后立即添加另一个Knockout条件（直接在</tbody>之前），则Knockout会抛出错误Cannot find closing comment tag to match: ko ifnot: get_xPos() == 0：

  <!-- ko ifnot: get_xPos() == 0 -->
  <td>
    <span data-bind="text: get_lname()">
    </span>
    , 
    <span data-bind="text:get_fname()">
    </span>

    <br />

    <span data-bind="text: get_email()">
    </span>
    <br />
    <span data-bind="text: get_phone()">
    </span>
    <br />
    <span data-bind="text: get_office()">
    </span>
  </td>
  <!-- /ko -->

这里的目的是有条件地创建一个新行。如果我的元素的xPosition为0，那么我创建一个新的行和单元格。否则我只是在我的表中创建一个新单元格。

有人能指出我的代码有什么问题吗？

Answer 1

来自评论：

所以你想创建每行有5个单元格的表吗？

右键。

在视图模型中反映出这种情况。这就是它的用途。视图不应该这样做。计算的可观察量是解决这个问题的方法。在您的视图模型中添加：

self.contactRows = ko.computed(function () {
    var rows = [],
        i, 
        contacts = self.get_contacts();

    for (i = 0; i < contacts.length; i += 5) {
        rows.push( contacts.slice(i, i + 5) );
    }

    return rows;
});

并在您的视图中使用它：

<tbody id="resultsTable" data-bind="foreach: contactRows">
  <tr data-bind="foreach: $data">
    <td>
      <span data-bind="text: get_lname()"></span>, 
      <span data-bind="text: get_fname()"></span><br />
      <span data-bind="text: get_email()"></span><br />
      <span data-bind="text: get_phone()"></span><br />
      <span data-bind="text: get_office()"></span>
    </td>
  </tr>
</tbody>

想想你是否能为你想要的东西找到更好的标记。

也许这是一种更好的方法：

从语义上讲，您正在尝试显示（嵌套）列表。将ul / li与适当的CSS一起使用会产生比使用table更有意义的标记。而且你不必填写毫无意义的空单元格，只是为了使表格看起来正确。

你甚至可以放弃完全嵌套的想法，并制作一个你设计的单个列表，每行最多允许5个“联系人”列表项（固定维项目在容器中浮动，容器比单个项目宽5倍）。

这样你就可以在视图中使用一个简单的foreach绑定，而根本不需要计算的observable。每行显示6个或4个项目相当于一个简单的CSS更改。

将KnockOut条件串起来

1 个答案: