Trộn JavaScript và Scala trong mẫu Play

Question

Tôi không chắc chắn cách thực hiện điều này. Tôi có thể mã hóa con đường tôi đang cố gắng sử dụng, nhưng tôi muốn làm điều này đúng cách.

Tôi có một menu thả xuống cần tải trang mới về thay đổi. Về cơ bản đây là cách tôi đang cố gắng làm điều đó (Tôi đã thử một vài biến thể này):

@getRoute(value: String) = @{ 
    routes.Accounts.transactions(Long.valueOf(value)) 
} 

    <script type="text/javascript"> 
     $(function() { 

     $("select[name='product']").change(function() { 

      location.href = @getRoute($(this).val()); 
     }).focus(); 

     $('a.view.summary').attr('href', "@routes.Accounts.index()" + "?selectedAccountKey=" + $('select[name=product]').val()); 
     }); 
    </script> 

Điều này tạo ra một ngoại lệ identifier expected but 'val' found. Tôi cũng đã cố gắng bao quanh nó trong dấu ngoặc kép, nhưng điều đó gây ra một [NumberFormatException: For input string: "$(this).val()"]

Vậy làm cách nào để tôi chèn một giá trị từ JavaScript vào hàm Scala?

Sửa

Đây là giải pháp của tôi, lấy cảm hứng từ câu trả lời chấp nhận. Trình đơn thả xuống này được định nghĩa trong thẻ được tạo để sử dụng lại bởi các thành phần khác nhau và URL cơ sở khác nhau cho mỗi thành phần. Các cách để đạt được điều này là để vượt qua một chức năng mà tạo ra một URL dựa trên một khoá tài khoản vào thả xuống:

@(accountList: List[models.MemberAccount], 
    selectedAccountKey: Long, 
    urlGenerator: (Long) => Html 
) 

<select name="product"> 
    @for(account <- accountList) { 
    @if(account.accountKey == selectedAccountKey) { 
     <option selected="selected" value="@urlGenerator(account.accountKey)">@account.description (@account.startDate)</option> 
    } else { 
     <option value="@urlGenerator(account.accountKey)">@account.description (@account.startDate)</option> 
    } 
    } 
</select> 

<script type="text/javascript"> 
$(function() { 
    $('select[name=product]').change(function() { 
     location.href = $(this).val(); 
    }); 
}); 
</script> 

Sau đó, bạn có thể định nghĩa một hàm như thế này để vượt qua trong:

@transactionsUrl(memberAccountKey: Long) = { 
    @routes.Accounts.transactions(memberAccountKey) 
} 

@accountsDropdown(transactionDetails.getMemberAccounts(), transactionDetails.getMemberAccountKey(), transactionsUrl) 

Answer 1

Bạn cần một cách để lưu trữ tất cả các URL trong trang, ví dụ

<option value="@routes.Accounts.transactions(id)">Display</option> 

Sau đó onChange, bạn có thể:

$("select[name='product']").change(function() { 
    location.href = $(this).val(); 
});