在 Play 模板中混合 JavaScript 和 Scala [英] Mixing JavaScript and Scala in a Play template

问题描述

我不确定这是如何完成的.我可以对要使用的路线进行硬编码，但我想以正确的方式进行.

I'm not sure how this is done. I could hard code the route I'm trying to use, but I'd like to do this the right way.

我有一个下拉菜单，需要在更改时加载新页面.这基本上是我尝试这样做的方式(我已经尝试了一些变体):

I have a dropdown that needs to load a new page on change. Here's basically how I'm trying to do it (I've tried a few variations of this):

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

这会产生 identifier expected but 'val' found 异常.我也尝试用引号将它括起来，但这会导致 [NumberFormatException: For input string: "$(this).val()"]

This produces a identifier expected but 'val' found exception. I also tried surrounding it in quotes, but that causes a [NumberFormatException: For input string: "$(this).val()"]

那么如何将 JavaScript 中的值插入到 Scala 函数中?

So how the heck do I insert a value from JavaScript into a Scala function?

编辑

这是我的解决方案，灵感来自已接受的答案.此下拉列表在一个标记中定义，该标记供不同组件重用，并且每个组件的基本 URL 都不同.实现此目的的方法是将根据帐户密钥生成 URL 的函数传递到下拉列表中:

Here's my solution, inspired by the accepted answer. This dropdown is defined in a tag that's made for reuse by different components, and the base URL is different for each component. The way to achieve this was to pass a function that generates a URL based on an account key into the dropdown:

@(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>

然后你可以定义一个这样的函数传入:

Then you can define a function like this to pass in:

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

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

推荐答案

您需要一种方法来存储页面中的所有 URL，例如

You need a way of storing all URLs in the page, e.g.

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

然后onChange，你可以:

Then onChange, you can:

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

这篇关于在 Play 模板中混合 JavaScript 和 Scala的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！