2

アイテムのリストを表示していますが、アイテムが利用できない場合は、デフォルトのメッセージを表示する必要があります。ここで、オブジェクトが作成されているかどうかを確認し、オブジェクトにリストが含まれているかどうかを確認する必要があります。

だから今、私は以下をやっていますが、それは不必要なdom要素を作成します。しかし、コンテナレスバインディングで同じことをすると、うまくいかないようで、KOの場合の && 構文もあります

<span data-bind="if: object"> 
    <span data-bind="if: !object().property">
         <p> The list is not available </p>
    </span> 
</span> // Works 

<!-- ko if: object -->
     <!-- ko if: !object().property -->
          <p> The list is not available </p>
     <!-- /ko -->
<!-- /ko -->  // Doesn't work

ありがとう

4

3 に答える 3

2

CodeThug が述べたように、提供したソリューションを使用すると、ko.applyBindings が終了するまでメッセージが表示されます。より冗長な解決策ですが、CSS に依存せずに問題を回避するには、次の jsfiddle に示すように動的テンプレートを使用します。

http://jsfiddle.net/sAkb4/1/

これにより、ko.applyBindings が完了した場合にのみ、仮想要素内に有効なマークアップが作成されます。

<!-- ko template: { name: dinamycList } -->
<!-- /ko -->

<script type="text/html" id="empty-template">
  ... list is NOT available markup ...
</script>

<script type="text/html" id="list-template">
  ... list is available markup ...
</script>

dinamycList は、有効なリストに必要な検証に従ってテンプレートの名前を返す関数です。

編集：

最後のコメントを読んで、リストを計算した後にのみ「利用できないテンプレート」を表示することが必要な動作であり、プロパティが false である場合、次のフィドルは最後のフィドルを修正して提供します正しい状態。

http://jsfiddle.net/sAkb4/3/

テンプレートの「if」条件は、ノックアウトの準備が整った後、リストの準備が整う前の瞬間を処理します。条件が乱雑になった場合は、明確なマークアップのために ko.computed 内に配置することをお勧めします。

<!-- ko template: { name: dinamycList, if: object() !== undefined && object().property !== undefined } -->
<!-- /ko -->
于 2013-05-04T23:35:29.603 に答える
0

これは、構成ライブラリよりも私のコンベンションで非常に簡単です

http://jsfiddle.net/VVb4P/

これだけで、ライブラリがテンプレートを作成します

   this.items.subscribe(function(items) {
        if(items.length === 0) {
            this.items.push(new MyApp.EmptyViewModel());
        }
   }, this);
于 2013-05-06T07:09:41.340 に答える