2

コンテンツが AJAX 経由で読み込まれるアプリケーション (例としてブログ投稿を使用してみましょう) で、読み込まれたコンテンツを DOM に追加する前に HTML テンプレートに読み込む最も適切な方法は何ですか?

たとえば、次のように、投稿の単純な JSON フィードを作成できます。

[
    {
        "id": 1,
        "title": "Title 1",
        "time": "2nd August 2013",
        "content": "Post content here."
    },
    ...etc
]

そして、投稿を表すために使用したいテンプレート:

<li data-id="{{id}}">
    <h3>{{title}}</h3>
    <small>{{time}}</small>
    {{content}}
</li>

私が以前に使用したいくつかの方法は次のとおりです。

  1. content-type を application/javascript に設定して .php ファイルを作成し、それをスクリプトとしてページに含めます。PHP を使用して、ディレクトリ内のすべての HTML ファイルを読み取り、その内容を圧縮します。のようなグローバル オブジェクトにコンテンツを文字列として格納しHTMLます。キーは HTML ファイルの名前です。その後、たとえば を介してテンプレートにアクセスできますHTML["post.html"]。投稿をロードするときは、JavaScript を使用して、グローバルにアクセス可能な HTML 文字列のトークンを投稿コンテンツに置き換えます。

    長所: すべてのテンプレート HTML は、アプリケーションの起動時にすぐに使用できます。
    短所：面倒に見える。テンプレートが多い場合、JavaScriptとして同梱するファイルが大きくなります。HTML が JavaScript に保存されるという考えは好きではありません。

  2. JSON フィードを更新してhtmlフィールドを含め、その投稿の完全な HTML を保存します (投稿コンテンツは既にテンプレートに挿入されています)。

    長所: HTML は、ステップ 1 のように起動時にではなく、オンデマンドでのみ読み込まれます。テンプレートを更新するために JavaScript による処理は必要ありません。
    短所: JSON は非常に大きくなります。JSON フィードで純粋に投稿関連のデータ以外のものを使用するのは奇妙に感じます。投稿ごとに同じ HTML を繰り返す必要はありません。

これを行うためのより明白なより良い方法があるかどうかはわかりません。もしあれば、それについて知りたいです。テンプレートは個別の HTML ファイルとして保存し、オンデマンドでのみロードするのが理想的です。

4

2 に答える 2

0

アプリケーションの複雑さによって多少異なります。私はあなたの最初の解決策の側にもっと傾倒します。通常、アプリケーションの他のビューを保存するのと同じ方法でテンプレートを保存します。次に、そのファイルをアプリケーションのブロックに含めて、プログラムで取得します。

より複雑なアプリケーションを使用している場合は、JSON データと共にテンプレートを返し、提供されたテンプレートと共に JavaScript が JSON データを解析するようにすることをお勧めします。元：

{
    "data": [
        {
            "id": 1,
            "title": "Title 1",
            "time": "2nd August 2013",
            "content": "Post content here."
        },
        ...etc
    ],
    "template": "<li data-id=\"{{id}}\"><h3>{{title}}</h3><small>{{time}}</small>{{content}}</li>"
}
于 2013-08-02T05:45:12.340 に答える