2

これはちょっとニッチなケースですが、単純なチャット ルーム スタイルのシナリオがあります。

そのため、観察可能なチャット エントリの配列が存在します (これは、パフォーマンスを良好に保つためにページングされる 100 エントリに制限される可能性があります)。

したがって、現在の foreach は次のようになります。

<!-- ko foreach: ChatEntries -->
<div class="chat-entry">
    <img class="entry-sender"></span>
    <span class="entry-content" data-bind="html: Content"></span>
</div>
<!-- /ko -->

現在、エントリごとに新しいチャット エントリが追加されます。これは問題なく、次のように表示されます。

既存のチャットシステム

ただし、次の投稿が同じ人によるものである場合は、既存のチャット エントリに追加するだけでよいという要件が現在あります (恐ろしいペイント ジョブバイを許してください)。

必要なチャットシステム

そして、ノックアウトでこれを行う方法がわかりません... afterRender を実行して、前のエントリのポスターと同じかどうかを確認してから、作成されたすべての dom を削除し、前のエントリを見つけて jquery を使用できると考えていましたまたは何か要素を追加するだけですが、dom を手動で操作しているので、これは非常にハックのように感じます。

この問題を解決する良い方法はありますか？

==編集==

いくつかのことを明確にするために、現在、新しいエントリが入るたびに常に監視可能な配列に追加していますが、何か新しいものが入るたびに配列を再作成するという議論があります。少しですが、これを行うことと個々のエントリを追加することの目に見える影響についてはわかりません。

現在、カットオフ ポイントの後に 50 のバッファがあるため、メイン アレイは約 100 を格納し、さらに 50% (最大 150 エントリ) を許可し、それを超えると、最後の 50 エントリをカットオフしてアレイを再作成します。 、再び 100 のエントリがあるため、ユーザーはページを戻して前のエントリを表示できます。そのため、これによりレクリエーションが減少しますが、最終的にはもう少し複雑になる可能性があるように思えます. 入ってくるすべてのチャットは localstorage にローカルに保存されるため、サーバーを必要とせずにすばやくページングできるため、チャット データが失われる心配はありません。

4

2 に答える 2

1

ビューに合わせて配列を変更すると、よりハックっぽくなりませんか? DOM ノックアウトを操作するために bindingHandlers があります。したがって、おそらくカスタムバインディングがあなたが探しているものになるでしょう. currentUser と previousUser を比較して、スパンを前のエントリに追加するか、新しいエントリを作成するかを決定します。jQuery なし、純粋な JavaScript。または、新しいメッセージの到着の効果でそれを行いたい場合は jQuery。テンプレートをパラメーターとして提供することもできるため、ユーザーが選択できるテーマをチャットに含めることができます。

バインディングには、すでに提供されている多くの情報もあります: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html

IMOこれは最もクリーンなソリューションである可能性があり、データはモデルにあり、ビューはビューにあります。メインの HTML は次のようにクリーンです。

<!-- ko foreach: ChatEntries as chatEntry -->
    <div class="chat-entry" data-bind="yourCustomChatBinding: chatEntry"></div>
<!-- /ko -->

1 つの考え: データが追加された場合、上記のコードは空の div を作成します。KO 仮想要素:

<!-- ko foreach: ChatEntries as chatEntry -->
    <!-- ko yourCustomChatBinding: chatEntry -->
<!-- /ko -->

また、仮想要素には、使用できる優れた API があります: http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html

于 2013-07-30T12:38:40.977 に答える