在 Play Framework 中获取模板参数答案

【问题标题】：Get parameter of template in Play Framework在 Play Framework 中获取模板参数
【发布时间】：2013-04-09 02:11:18
【问题描述】：

我有一个带有这样参数的模板：

@(people: List[models.Person])
<html>
<head>      
</head>
<body>
<table class="centered" id="table_people">
 <thead>
   <tr class="table_header">
        <th></th>
        <th class="people_column">Name</th>
        <th class="people_column">Active</th> 
    </tr>
 </thead>
 <tbody>     
    @for(p <- people) {
     <tr>
        <td><button id="timesheet_view_" >View</button</td>
        <td><b>@p.getName()</b></td>
        <td>@p.isActive()</td>          
    </tr>           
   }
</tbody>
</table>

该代码显示人员列表。现在，我想在单击按钮视图时显示人员信息。为此，我必须写这样的东西：

    <script>
    $( "#timesheet_view_<%= people[i].id %>" )
      .button()
      .click(function() {
         people = '<%= people[i].name %>';
         showTimeSheet('current', '<%= people[i].name    %>');              
            })
   </script>

但我找不到如何在 Javascript 中获取模板的 value people 参数。我尝试使用@字符，但它不起作用。

【问题讨论】：

标签： javascript jquery parameters playframework playframework-2.1

【解决方案1】：

首先，您必须修复您的 HTML 代码： <td><button id="timesheet_view_" >View</button</td>:
正确关闭按钮元素：</button 带有“>”。

其次，你必须给每个按钮一个唯一的 ID：

您的代码：

@for(p <- people) {
  <tr>
    <td><button id="timesheet_view_" >View</button</td>
    <td><b>@p.getName()</b></td>
    <td>@p.isActive()</td>          
  </tr>           
}

试试看：

@for(p <- people) {
  <tr>
    <td><button id="timesheet_view_@p.id">View</button></td>
    <td><b>@p.getName()</b></td>
    <td>@p.isActive()</td>          
  </tr>           
}

<script>
  $(document).ready(function() {
    // There are better ways to do this, but it's just for your example
    @for(p <- people) {
      $("#timesheet_view_@p.id").click(function(e) {
        ... // your javascript code here
      });
    }
  });
</script>

在我看来，最好在此处使用链接（而不是按钮），因为对于每个按钮，您都需要为 onclick 事件编写额外的 javascript 代码。通过链接尝试并播放！将为您完成工作：

@for(p <- people) {
  <tr>
    <td><a class="btn" href="@routes.Application.view(p.id)">View</a></td>
    <td><b>@p.getName()</b></td>
    <td>@p.isActive()</td>          
  </tr>           
}

顺便说一句，如果你使用 Twitter Bootstrap，你可以使用class="btn"，你的链接看起来像一个按钮。

开始您的游戏！应用程序并查看 HTML 源代码。你会看到你的代码<button id="timesheet_view_@p.id">View</button> 看起来像这样：

<button id="timesheet_view_1">View</button>

<button id="timesheet_view_2">View</button>

...

<button id="timesheet_view_9">View</button>

希望这会有所帮助。

最好的问候， gfjr

【讨论】：

我不认为你的答案是正确的，人物参数对脚本标签没有用。

【解决方案2】：

你不能那样做。 Javascript 运行在客户端，而 Play 运行在服务器端。

在您的 Javascript 运行时，页面已经被渲染并且 Play 已经完成了它的一部分。

你可以做的是从people获取相关数据，放到数据属性中。

<tbody>     
  @for(p <- people) {
    <tr data-people-id="@p.getId()" data-people-name="@p.getName()">
      <td><button class="timesheet_view" >View</button</td>
      <td><b>@p.getName()</b></td>
      <td>@p.isActive()</td>          
    </tr>           
  }
</tbody>

您可以在脚本中获取数据属性。

<script>
  $( ".timesheet_view" )
    .button()
    .click(function() {
      var row = $(this).closest("tr");
      var peopleId = row.data("peopleId");
      var peopleName = row.data("peopleName");
      // Do whatever you want with this data...
      // Not sure how the showTimeSheet is working so leave it up to you
      //showTimeSheet('current', '<%= people[i].name    %>');              
  });
</script>

【讨论】：