0

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

@(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 参数。我尝试使用 @ 字符，但它不起作用。

4

2 回答 2

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

于 2013-09-02T09:12:22.310 回答
0

你不能那样做。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>
于 2013-04-09T09:14:19.023 回答