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

【问题标题】：Mixing JavaScript and Scala in a Play template在 Play 模板中混合使用 JavaScript 和 Scala
【发布时间】：2012-05-22 19:44:56
【问题描述】：

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

我有一个下拉菜单，需要在更改时加载新页面。这基本上是我正在尝试的方式（我已经尝试了一些变体）：

@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()"]

那么我到底如何将 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)

【问题讨论】：

你想错了。 JavaScript 在客户端执行，而 scala 在服务器端执行！两者之间在那个方向（JavaScript 到 Scala）进行通信的唯一方法是使用 POST 或 GET。
是的，你是对的，这些 Scala 语句需要在页面渲染之前进行处理。不过，我绝对不想仅仅为了获得该路线的价值而进行 REST 调用。我希望有一些方法可以动态地做到这一点，而无需在 JS 中进行调用或硬编码路由。
你能把它作为路由的一部分吗？喜欢location.href = '/products/'+$(this).val(); 然后在路由config/controller中处理。也许更多关于您的案例细节会帮助我们找到更好的解决方案，实际上“$(this).val()”是什么？
@WesFreeman，是的，我绝对可以这样做，但如果可能的话，我会尽量避免对路线进行硬编码。我宁愿参考一个动作名称，以防路由因任何原因而改变。但我认为这就是我所坚持的。
列表中的所有项目是否都相同？然后你可以从 scala 端传递它...

标签： javascript scala playframework

【解决方案1】：

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

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

然后onChange，你可以：

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

【讨论】：

好主意！我刚刚经历了一个重大的“为什么我没有想到那个”的时刻。
我看不出它为什么不起作用，但我还是想先尝试一下，以确保没有问题，而且我还没有机会。如果我尝试它并且它有效，那么你会得到你的绿色勾号和你的 15 分:-)