1

在我的游戏项目中，我将我的所有 javascript 和 css 链接到我的 main.scala.html 中。我还想为我的应用程序使用类似 JQuery mobile 的移动界面。一个项目可以有多个视图吗？我可以创建一个与 main 类似的包装器并将其用于移动 css/js 吗？

4

3 回答 3

1

你可以做任何你想做的事，玩！视图非常灵活。

事件如果我不确定完全理解你想要什么，我可以给你一些建议。

从视图加载脚本

您可以将视图的特定脚本加载到您的main.scala.html.

main.scala.html

@(title: String, scripts: Html = Html(""))(content: Html)

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" media="screen" href='@routes.Assets.at("stylesheets/main.css")'>
        @* By default, nothing but you can override from any view *@
        @scripts
    </head>
    <body>
        @content
    </body>
</html>

anyview.scala.html

@(title: String)

@* Declare the script(s) you need for that view *@
@scripts = {
    <script src='@routes.Assets.at("javascripts/my-specific-script.js")' type="text/javascript"></script>
}

@main(title, scripts) {
    @* Some content *@
}

如果视图中不需要额外的脚本，则不要传递scripts参数（它在 中具有默认的空值main.scala.html）。

加载您需要的内容main.scala.html

通过传递参数（基于您的设备检测）。

main.scala.html

@if(someParameter.isMobileDevice()) {
    <script src='@routes.Assets.at("javascripts/my-mobile-script.js")' type="text/javascript"></script>
}

那么响应式设计呢？

您的样式可以根据用于查看页面的设备进行调整。您可能不需要加载额外的东西。

于 2013-04-09T13:59:25.840 回答
1

最简单的方法是......只是检查:) 无论如何，是的，你可以拥有尽可能多layouts的，没有限制。（根据文档术语，layout是一个视图，它是其他视图的某种包装器 - 例如默认main.scala.html文件）。

为了保持我以前总是将main.scala.html布局移动到新创建的包中的顺序：app.views._layouts. 我也在创建其他的......所以在你的观点中你可以很容易地使用：

@_layouts.main(params){
   ...
}

或者

@_layouts.mobile(params){
   ...
}

PS：正如 Alban 所写，也可以使用一种布局并向它们推送其他脚本。结合这两种技术，您可能可以做任何您需要的事情。

于 2013-04-09T13:59:38.493 回答
0

My2c

对于这种用例，我最好的猜测是使用正确的工具。实际上，您真正想要的是您的应用程序能够响应它的使用方式。也就是说，您需要响应性。所以炒作不是;-)。

此外，在服务器端，窗口缩小的情况将很难处理......简单地说，因为它们纯粹是客户端操作 :-/ 。所以视口在 1200 像素（真实）屏幕上是 320 像素宽。

但是，您确实可以使用传递给布局的特定参数来调整它们的行为，但这需要您使用浏览器提供的信息来管理服务器端的案例......

那么为什么不让浏览器为你做所有事情呢？

希望稳定的库会有所帮助，例如： yepnopejs，它可以让您定义要加载的关于谓词的 js 文件（如320 < screen.width）。

或者为了减少设备之间的重复代码或if-then-else，您可以将 yesnope 与responsejs一起使用，这将使您有机会以声明方式声明一些“响应式”行为（什么没有 JS KoOl 啊？），如下所示：

<a 
   href=hi-fi.png
   data-min-width-320='<img src=lo-fi.png alt="image @ 320+">' 
   data-min-width-961='<img src=hi-fi.png alt="image @ 961+">'
> 
   text-only link @ <320px and no-js
</a>

或者

事实上，@biesior 和 @Alban 的答案都是正确且有帮助的。我最后的接触是使用在复合控制器中计算一次的隐式参数，从请求标头中提取信息（至少）。

于 2013-04-10T13:12:55.613 回答