在 AJAX 结果中重用 Yesod 小部件

Question

我正在编写一个very simple Yesod message list，它使用 AJAX 添加新列表项而无需重新加载页面（在其他用户修改数据库的情况下，或客户端自己添加项目的情况下）。这意味着我必须在 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')
    );
}

我希望能够以某种方式统一这两种表示。是我运气不好，还是我可以以某种方式滥用小部件来生成 HTML 响应和在 JavaScript 文件中填写代码？

Note: 当然，我知道模板的工作方式必须非常不同，因为 AJAX 调用是从 JS 对象而不是服务器获取其值。这是一个很长的尝试，但我想我会看看是否有人以前考虑过这个问题。

Answer 1

我认为在服务器或客户端上选择一个 位置来进行模板渲染是一种 AJAX 最佳实践。 Yesod（当前）面向在服务器上进行渲染。

不过，这仍然可以使用 AJAX 替换内容。您应该得到一个 text/html 响应，而不是从 POST 获取 JSON 响应，该响应包含在服务器上呈现模板的结果，该值将通过 JSON 返回，然后替换正在生成的 DOM 节点的 innerHTML更新了。

如果您想同时支持 JSON 和 HTML 响应（通过 API 或其他方式支持 3rd 方应用程序），您必须使响应的格式成为请求的函数；将“.json”或“.html”附加到 URL 或包含列出客户端所需的特定文档类型的 HTTP 标头。

如果 Yesod 提供一个“jwhamlet”模板或通过 javascript 呈现 HTML 以支持客户端呈现的东西，那就太好了，但我不知道。不过，这并不是说没有一个我不知道，所以请留意其他答案。

如果你想做这样的事情，你可以尝试调整 hamlet quasi-quote 代码，而不是将 quasi-quotes 扩展为 html 生成函数，而是将它们扩展为 JSON 生成函数 和 一个预渲染的文本块，它是 mustache 样式的模板，这样函数返回的 JSON 将为模板提供正确的上下文，以便按照您想要的方式渲染模板。