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或其他东西支持第三方应用程序），您必须使响应的格式成为请求的函数;将“.json”或“.html”附加到URL或包含列出客户端所需特定文档类型的HTTP标头。

如果Yesod提供了一个'jwhamlet'模板或者通过javascript渲染HTML以支持客户端渲染，那将是很好的，但我不知道。但这并不是说没有一个我不知道的，所以请留意其他答案。

如果你想做这样的事情，你可能会尝试调整hamlet准引号代码，这样它就不会将准引号扩展为生成html的函数，而是将它们扩展为生成JSON的函数和预先渲染的文本块，它是胡子样式的模板，这样函数返回的JSON将为模板提供正确的上下文，以便按照您想要的方式呈现。

在AJAX结果中重用Yesod小部件

1 个答案: