1

我正在编写一个非常简单的 Yesod 消息列表，它使用 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 对象获取其值，而不是从服务器获取。这是一个很长的镜头，但我想我会看看是否有人以前考虑过这个问题。

4

1 回答 1

3

我认为在服务器或客户端上选择一个地方进行模板渲染是一种 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-quote 扩展为 html 生成函数，而是将它们扩展为 JSON 生成函数和预渲染块作为 mustache 样式模板的文本，这样函数返回的 JSON 将为模板提供正确的上下文，以便按照您想要的方式呈现。

于 2013-09-16T17:30:51.133 回答