1

AJAX を使用して、ページをリロードせずに新しいリスト アイテムを追加する非常に単純な Yesod メッセージ リストを作成しています (他のユーザーがデータベースを変更する場合、またはクライアント自身がアイテムを追加する場合)。これは、Halmet テンプレート (ページが最初に読み込まれるとき) と Julius テンプレート (動的な追加が行われるとき) の両方で、メッセージ項目の HTML 構造をエンコードする必要があることを意味します。それらは次のようになります。

でhomepage.hamlet：

$if not $ null messages
    <ul id=#{listId}>
        $forall Entity mid message <- messages
            <li id=#{toPathPiece mid}>
                <p>#{showMarkdown $ messageText message}
                <abbr .timeago title=#{showUTCTime $ messagePosted message}>

そしてでhomepage.julius：

function(message) {
    $('##{rawJS listId}').prepend(
        $('<li>')
        .attr('id', message.id)
        .append('<p>' + message.text + '</p>')
        .append($('<abbr class=timeago />')
                .attr('title', message.posted).timeago())
        .slideDown('slow')
    );
}

この 2 つの表現を何らかの方法で統一できるようにしたいと考えています。私は運が悪かったのでしょうか、それともウィジェットを悪用して、HTML 応答を生成し、JavaScript ファイルにコードを入力することはできますか?

Note:もちろん、AJAX 呼び出しはサーバーからではなく JS オブジェクトから値を取得するため、テンプレートの動作が大きく異なることは理解しています。それは遠いショットですが、誰かがこれについて前に考えたことがあるかどうか見てみようと思いました.

4

1 に答える 1

3

サーバーまたはクライアントのいずれかで、テンプレートのレンダリングを行う場所を1 つ選択することは、AJAX のベスト プラクティスのようなものだと思います。Yesod は (現在) サーバー上でレンダリングを行う方向に向いています。

ただし、これはコンテンツの AJAX 置換でも機能します。POST から JSON 応答を取得する代わりに、JSON を介して返された値でサーバー上のテンプレートをレンダリングし、処理中の DOM ノードの innerHTML を置き換えた結果を含む text/html 応答を取得する必要があります。更新しました。

JSON と HTML の両方の応答をサポートする場合 (API などを介してサードパーティ アプリケーションをサポートするため)、応答の形式を要求の関数にする必要があります。URL に「.json」または「.html」を追加するか、クライアントが必要とする特定のドキュメント タイプをリストする HTTP ヘッダーを含めます。

クライアントのレンダリングをサポートするために、Yesod が 'jwhamlet' テンプレートまたは javascript を介して HTML をレンダリングする何かを提供してくれればいいのですが、私はそれを知りません。とはいえ、私が認識していないものがないというわけではないので、他の回答に目を光らせておいてください.

そのようなことをしたい場合は、ハムレットの準引用符コードを微調整して、準引用符を html 生成関数に展開する代わりに、JSON 生成関数と事前にレンダリングされたチャンクに展開してみてください。関数によって返される JSON が、テンプレートを希望どおりにレンダリングするための正しいコンテキストを提供するような、口ひげスタイルのテンプレートであるテキストの。

于 2013-09-16T17:30:51.133 に答える