5

私は、監査とコメントを含むノックアウト監視可能な一連のアクティビティを持っています。サーバーからデータを取得し、オブジェクトのタイムスタンプに基づいてアクティビティの配列を並べ替えました。

タイプに基づいて条件付きでhtmlを表示できるようにしたいので、監査とコメントは異なって見えます。

<!-- ko foreach: activities -->
<div class="audit" data-bind="visible: {activity is typeof Audit}"> 
    @*Do some audit html*@
</div>
<div class="comment" data-bind="visible: {activity is typeof Comment}"> 
    @*Do some comment html*@
</div>
<!-- /ko -->

次の html がありますが、条件がどうなるかわかりません。上にプレースホルダーとして何かを書いたので、私が達成しようとしていることがわかります。

私はおそらくこれに完全に間違って近づいています。どんな助けも大歓迎です!

4

2 に答える 2

3

Nayjestのソリューションは、表示されているバインディングをifバインディングに変更した場合に機能するはずです。そうすれば、タイトルに依存するパーツをレンダリングしようとはしません。

ただし、より良い解決策は、おそらく2つのテンプレートを用意し、タイプに基づいてそれらを実行することです。$ dataを受け取り、$ data instanceof Auditのような結果に応じて、たとえば「auditTemplate」または「commentTemplate」を返すメソッドをVMに設定できます。次に、これらのIDを持つスクリプトタグとして2つのテンプレートが埋め込まれます。

<script id="auditTemplate" type="text/html">
<div class="audit">
<!-- Do some audit stuff -->
</div>
</script>

<script id="commentTemplate" type="text/html">
<div class="comment">
<!-- Do some comment stuff -->
</div>
</script>

そして、VMには、次のようなものがあります。

this.getTemplate = function(data) {
return (data instanceof Audit) ? 'auditTemplate' : 'commentTemplate'
}

あなたのページのhtmlであなたは次のようなことをするでしょう：

<!-- ko foreach: activities -->
<div databind="template: {name:$parent.getTemplate($data), data: $data}"></div>
<!-- /ko -->
于 2012-06-14T14:42:27.953 に答える
2

グローバル スコープで表示されるクラス Audit とビュー モデルのプロパティ 'activities' がある場合は、次のようにしてみてください。

<div data-bind="foreach: activities">
   <div data-bind="visible: $data instanceof Audit">
       <h1 data-bind="text: $data.title"></h1>
       <!-- Some other data here -->
   </div>
</div>
于 2012-06-13T15:43:46.623 に答える