传递 innerHtml 值作为播放框架路由的参数答案

【问题标题】：Passing innerHtml value as parameter for play framework routes传递 innerHtml 值作为播放框架路由的参数
【发布时间】：2015-05-12 04:12:07
【问题描述】：

您好，我正在尝试将内联编辑的表值作为参数传递给播放路线，有人可以帮助我吗？这是我的html代码

<table class="gradienttable">
        <thead>
                <tr>
            <th>Task</th>
             <th>TimeSheetdate</th>
            <th>Hours</th>
            <th>IsBilled</th>
             <th>Work Place</th>
        </tr>
        </thead>
            <tbody>
               @for(element <- CurrentPage) {
                        <tr>
                             <td contenteditable="true" id="task1">@element.getTask()</td>
                 <td>@element.getTimeSheetDate()</td>
                 <td contenteditable="true" id="hours">@element.getHours()</td>
                 <td contenteditable="true" id="isbilled">@element.getIsBilled()</td>
                 <td contenteditable="true"id="workplace">@element.getWorkPlace()</td>
                <td><a href="@{routes.Application.edit(task1.innerHTML)}" ><img src="@routes.Assets.at("images/edit.jpg")" alt="EDIT" style="width:20px;height:20px"></a>
                            </tr>
                    } 
            </tbody>
        </table>

路线

GET     /Application/edit            controllers.Application.edit(task1:String)

应用程序.java

public static Result edit(String task1)
    {
        return ok(DisplayTimeSheet.render(task1));
    }

【问题讨论】：

你能做个小提琴吗？

标签： html playframework routes

【解决方案1】：

您似乎将服务器端呈现的 Scala 模板与客户端的 DOM 操作混淆了。对于@{routes.Application.edit(task1.innerHTML)}，就非DOM 模板而言，task1 不存在。

您对<a href="..."> 的使用有点奇怪，因为这会进行同步调用，如果您正在进行内联编辑，那么这可能不是您想要的。这个答案涵盖了一种使用 Play 的 JavaScript 路由器支持的异步方法（如果您以前没有见过，它非常酷）。

您需要在 JavaScript 路由器中公开 edit：

// You can also return an F.Promise<Result>
public static Result jsRoutes() {
response().setContentType("text/javascript");
return ok(Routes.javascriptRouter("appRoutes", //appRoutes will be the JS object available in our view
                                  routes.javascript.Application.edit()));

}

然后在路由中公开该方法：

GET           /assets/js/routes             controllers.Application.jsRoutes()

这将生成一段你可以导入的 JavaScript

<script src="@controllers.routes.Application.jsRoutes()" type="text/javascript"></script>

最后，编写一些 JavaScript 来处理内联编辑完成。

function doInlineEdit(taskName) {
    appRoutes.controllers.Application.edit(taskName).ajax( {
      success : function ( data ) {
        target.closest('li').remove();
      }
    });
}

然后，您只需要连接该方法以在您的内联可编辑元素更改内容时调用。

您可以找到更多信息here。

【讨论】：