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 でテンプレートの値 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 に答える