0

我有类似于以下 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);
}

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

4

3 回答 3

2

我的Switch-Case 绑定就是为了解决这类问题。

<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>
于 2013-01-11T20:26:50.813 回答
1

使用ifnot而不是!标志。删除()，您正在评估它的价值。

<!-- ko ifnot: isNew -->
于 2013-01-10T23:07:28.133 回答
0

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

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

于 2013-01-11T17:37:19.987 回答