0

次のように動作するリストを Web サイトに実装する必要があります。

1.　ホームページでは、リストがレンダリングされ、最初の 12 項目のみが表示され、その後に「もっと読み込む...」ボタンが表示されます。

2.　ページのロードが終了した直後に、次の 12 個のデータがプリロードされます。

3.　「さらに読み込む」をクリックすると、読み込まれた 12 個がレンダリングされ、その直後に次のものがプリロードされ、というように何度も何度も...

私のアプリは、node.js、express.js、jQuery、ejs、およびブートストラップを使用しています。

現在、私のサーバー ロジックはデータのリストを正常に生成し、次に ejs テンプレートを使用して大きなリスト全体をレンダリングします。

ajaxを使用して動的リストに変更する方法について、私はかなり混乱しています。

サーバーから ejs を使用して「最初のレンダリング」を行う必要があります。その後、リスト項目の追加は ejs を使用して再度レンダリングされますが、今回はクライアント側からですか? 必要な動作を実装するための最良/簡単な方法は何ですか? ところで-すべてのリスト項目には、一意の画像を指すimgタグが含まれています-JSONを使用する場合、それは問題ではありません...？

ヘルプ、または役立つ例へのリンクは非常に高く評価されます。ありがとう。

4

1 に答える 1

1

私の知る限り、AJAX呼び出しには2つのオプションがあります。1つは、JSONをブラウザーに返し、クライアント側のテンプレートライブラリを使用してデータをレンダリングすることです。もう1つのオプションは、サーバー上でリストのみをレンダリングし、HTMLをブラウザーに返し、それをDOMに直接挿入することです。

最初の読み込みからHTMLドキュメント全体ではなく、リストアイテムのJSONまたはHTMLのいずれかのみを返すように、エクスプレスで別のルートを設定する必要があります。

HTMLをブラウザに返すことの利点は、ブラウザにテンプレートエンジンをロードしたり、ブラウザとサーバーの両方にテンプレートロジックを設定したりする必要がないことです。これにより、コードサイズが削減され、すべてがDRYに保たれます。ただし、他の操作を実行するためにデータをブラウザメモリに保存する必要がある場合は、JSONが最善の策です。

私は、あなたが物事をより明確にするために必要なあらゆる点を拡大できることを嬉しく思います。

于 2012-12-09T04:23:15.317 に答える