在Play模板中混合使用JavaScript和Scala

Question

我不确定这是怎么做的。 我可以硬编码我正在尝试使用的路线，但我想以正确的方式做到这一点。

我有一个需要在更改时加载新页面的下拉列表。 这基本上是我试图这样做的（我尝试了一些变体）：

@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的identifier expected but 'val' found异常。 我也试过在引号中包围它，但是这会导致[NumberFormatException: For input string: "$(this).val()"]

那么我如何将JavaScript中的值插入Scala函数呢？

编辑

这是我的解决方案，受到公认答案的启发。 此下拉列表在一个标记中定义，该标记用于不同组件的重用，并且每个组件的基本URL都不同。 实现此目的的方法是将基于帐户密钥生成URL的函数传递到下拉列表中：

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

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

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

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

Answer 1

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

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

然后onChange，你可以：

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