Question

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

@(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中获取模板的值人参数。我尝试使用@字符，但它不起作用。

Answer 1

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

其次，你必须给每个按钮一个唯一的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

Answer 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>

在Play Framework中获取模板的参数

2 个答案: