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);
}

「アイテム」はサーバーからのもので、「NewItems」はユーザーがリンクをクリックすると追加されます。アイデアは単純に、新しいアイテムの入力ボックスを用意することですが、既存のアイテムを表示するだけです。これは、既存の項目 (isNew が false の場合) では問題なく機能するように見えますが、isNew が true の場合、両方のマークアップ セットがレンダリングされます (2 つの行が追加され、1 つが編集可能で、その後に 1 つの表示のみが続きます)。isNew が true の場合、最初の "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 に答える