Question

在我的play项目中，我将所有的javascript和css链接到main.scala.html中。我还希望使用JQuery mobile之类的东西为我的应用程序提供移动界面。是否可以为一个项目提供多个视图？我可以创建一个类似于main的包装器并将其用于移动css / js吗？

Answer 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>
}

响应式设计怎么样？

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

Answer 2

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

保持我以前的订单始终将main.scala.html布局移动到新创建的包中：app.views._layouts。此外，我正在创建其他的...所以在您的观点中，您可以轻松使用：

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

或

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

P.S。：正如Alban所写，还可以使用一个布局，推送来添加其他脚本。结合使用这两种技术，您可以完成所需的一切。

Answer 3

MY2C

我对这种用例的最佳猜测是使用正确的工具。实际上，您真正想要的是您的应用程序响应的使用方式。也就是说，你需要回应。所以大肆宣传不是; - ）。

此外，在服务器端，它很难处理窗口减少的情况......简单地说，因为它们纯粹是客户端操作： - /。因此视口在1200px（真实）屏幕上宽320px。

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

那么为什么不让浏览器为你做一切？

希望，稳定的图书馆会有很多帮助，例如： yepnopejs，它允许您定义要加载的谓词（如320 < screen.width）。

或者为了减少设备之间的重复代码或 if-then-else ，您可以使用yesnope和responsejs，这将为您提供机会宣布一些＆＃34;响应＆＃34;声明性的行为（什么没有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的答案都是正确和有用的。我的最后一步是在composite控制器中使用一次隐式参数计算，该控制器从请求标头中提取信息（至少）。

一个有多个视图的项目

3 个答案:

MY2C

那么为什么不让浏览器为你做一切？

或