Question

我有类似于以下html的内容：

<table>
  <tbody data-bind="foreach: { data: items, afterRender: alternateRowColor }">
    <!-- ko if: isNew() -->
    <tr>
      <td><input data-bind="text: prop"/></td>
    </tr>
    <!-- /ko -->
    <!-- ko if: !isNew() -->
    <tr>
      <td data-bind="text: prop"/></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>

使用如下定义的对象集合：

function NewItem() {
  this.prop = ko.observable(0);
  this.isNew = ko.observable(true);
}

function Item(prop) {
  this.prop = prop;
  this.isNew = ko.observable(false);
}

“Items”来自服务器，当用户点击链接时会添加“NewItems”。这个想法只是为新项目设置一个输入框，而只是显示现有项目。这似乎适用于现有项目（当isNew为false时），但是当isNew为true时，两组标记都会呈现（添加两行，一行可编辑后跟一个显示）。如果isNew为真，我希望只渲染第一个“tr”。有谁知道这里发生了什么？

Answer 1

我的Switch-Case binding旨在解决此类问题。

<table>
  <tbody data-bind="foreach: { data: items, afterRender: alternateRowColor }">
    <tr data-bind="switch: true">
      <!-- ko case: isNew -->
        <td><input data-bind="text: prop"/></td>
      <!-- /ko -->
      <!-- ko case: $else -->
        <td data-bind="text: prop"/></td>
      <!-- /ko -->
    </tr>
  </tbody>
</table>

Answer 2

使用ifnot代替!符号。删除()，您正在评估它的价值。

<!-- ko ifnot: isNew -->

Answer 3

我能够使用模板选择器完成此操作。我创建了一个演示行为的小提琴：http://jsfiddle.net/tltjr/3FUQR/

我仍然不确定为什么if行为不起作用，但我觉得这种方法更灵活，更可读。

如果/ ifnot没有容器元素，使用Knockout问题

3 个答案: