播放框架 2. ajax 回调中的渲染模板答案

【问题标题】：Play framework 2. Rendering template inside ajax callback播放框架 2. ajax 回调中的渲染模板
【发布时间】：2015-04-21 19:19:16
【问题描述】：

我有渲染 cmets 的模板，comment.scala.html:

@(date: String, text: String, name: String)
...
<h4>@name</h4>  
<p>@date</p>  
<div>@comment</div>

评论也添加到带有 ajax 的页面，sendcomment.js:

$("#commentForm").submit(function () {
        jsRoutes.controllers.Posts.addComment($("#blogpostContainer").data("post-id")).ajax({
            success: function (data) {

              //here i populate data with js - my current solution
              var commentHtml = "<li><h4>" + data.name + ... +</li>"

              //but i want use comment template for populating data

                $("#commentsContainer").append(commentHtml);
                $('#commentForm').each(function () {
                    this.reset();
                });
            },
            error: function () {
                alert("Error!")
            },
            data: $("#commentForm").serialize()
        })
        return false;
    }
)

我知道，我不能将 Scala 变量（服务器端）与 JS 变量（客户端）混合使用。
我的问题 - 如何使用 html 模板来呈现 ajax 回调？

【问题讨论】：

标签： playframework playframework-2.0 playframework-2.3

【解决方案1】：

为了扩展@Ryan 的答案，在 Scala 表单中重用 comment.scala.html 的唯一方法是返回 HTML 而不是 JSON。

优点

代码重用
类型安全

缺点

如果 HTML 的大小 > JSON 的大小，可能会增加带宽使用率）

为此，您的控制器方法将类似于此伪代码，不包括错误检查等。我假设Java，但Scala版本的逻辑是一样的。

public static F.Promise<Result> addComment() {
    return F.Promise.promise(() -> convert POST data to a comment object)
                    .map(comment -> comment.save())
                    .map(comment -> ok(comment.render(comment.date, 
                                                      comment.text,
                                                      comment.userName)));
}

你的 JavaScript 会看起来像

$("#commentForm").submit(function () {
  jsRoutes.controllers.Posts.addComment($("#blogpostContainer").data("post-id")).ajax({
    success: function (data) {
      $("#commentsContainer").append(commentHtml);
      $('#commentForm').each(function () {
        this.reset();
      });
    },
    error: function () {
      alert("Error!")
    },
    data: $("#commentForm").serialize()
  })
  return false;
})

【讨论】：

有一个关于这种方法的有趣讨论here。

【解决方案2】：

就像变量一样，Scala 模板也呈现在服务器端。

你可以：

渲染 HTML 服务器端并在 AJAX 调用中返回
使用客户端模板库（有很多）

【讨论】：