Play框架前端应用细节
2016-04-20 11:56
141 查看
1、模板语法
用表达式时,如下使用时,只有client不为null的情况下,才进行client.name的输出。<h1>Client ${client?.name}</h1>
在应用中,模板引擎默认对所有的动态表达式进行转义,以此来避免XSS的安全问题。可以通过调用扩展方法raw(),以非转义的形式在页面中输出,如:
${title.raw()} --> <h1>Title</h1>
如果需要显示大量的非转义HTML内容,可以使用#{verbatim /}标签:
#{verbatim} ${title} --> <h1>Title</h1> #{/verbatim}
Play通过路由器可以(逆向)生成URL,匹配指定的路由。在模板中使用@{…}引用可以达到相同的目的:
<h1>Client ${client.name}</h1> <p><a href="@{Clients.showAccounts(client.id)}">All accounts</a></p> <hr /> <a href="@{Clients.index()}">Back</a>
该实例中,@{Clients.showAccounts(client.id)}调用了Clients控制器中的showAccounts Action方法,并传递了client.id参数。 @@{…}引用的使用语法与@{…}相同,只不过生成的是绝对URL(尤其适用于邮箱)。
2、模板继承
Play中,可以 使用#{extends /} 和 #{doLayout /}来继承模板,使用#{get}和#{set}标签进行参数传递,如:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>#{get 'title' /}</title> <link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/main.css'}" /> </head> <body> <h1>#{get 'title' /}</h1> #{doLayout /} <div class="footer">Built with the play! framework</div> </body> </html>
其他页面使用#{extends}标签可以非常简单地植入该装饰模板,具体使用方法如下:
#{extends 'simpledesign.html' /} #{set title:'A decorated page' /} This content will be decorated.
该子模板使用#{extends 'simpledesign.html' /}标签来继承simpledesign.html,使用#{set title:'A decorated page' /}标签传递页面的title变量,最后在页面中输出This content will be decorated。
3、内置标签
#{a} Play需要通过路由器(逆向)生成URL,以此来调用指定的Action。框架封装了HTML中的超链接标签<a>,可以方便地调用控制器中的Action,如:#{a @Application.index()} 首页 #{/a}
#{authenticityToken /} 使用#{authenticityToken /}标签可以防止跨站请求伪造,同时也能消除刷新提交和后退提交所带来的困扰。#{authenticityToken /}首先会为服务器和客户端表单生成相同的随机令牌,并以隐藏的input输入域的形式嵌入表单。当用户点击submit按钮提交时,令牌会伴随着表单信息一并发送至控制器中的Action,在Action对提交的表单进行处理前,会先进行令牌的比对,只有令牌信息一致时,才进行后续的表单处理操作。
#{authenticityToken /}
#{field} #{field}标签的作用非常大,本着Play的“简约”理念,#{field}标签可以帮助开发者减少同一变量名的重复使用:
#{field 'user.name'} <p> <label>&{field.name}</label> <input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}"> <span class="error">${field.error}</span> </p> #{/}
Field.name 是user.name, filed.value是user.name的值。Play提倡在页面开发中尽量使用#{field}标签,而不是重复地编写变量名。 #{i18n} i18n在模板中的用法比较特殊,不仅可以直接以标签的形式用于模板语言,也可以直接在JavaScript中调用。可以在JavaScript代码中使用i18n()方法来访问本地化消息文件,如i18n('app_title')。 引入
#{i18n /}
在Js中使用
alert(i18n('hello_world')); alert(i18n('hello_someone', 'John'));
#{set},#{get} #{set}标签用于设置可以在模板中使用的变量。如
#{set email:'china@oopsplay.org'},就设置了模板变量email的值,可以通过
#{get 'email'}来获取。#{set}标签的定义中可以引用其他变量。
4、内置对象扩展
在模板引擎中使用Java对象是必不可少的,开发者还可以为其增加一些额外的方法。这些方法并没有定义在原始的Java类中,而是模板引擎动态添加的。下面是一些比较有用的扩展:${['red', 'green', 'blue'].join('/')} //合并 效果 red/green/blue ${['red', 'green', 'blue'].last()} //返回最后一个元素 ,效果 blue ${new Date(1275910970000).format('dd MMMM yyyy hh:mm:ss')} //07 June 2010 01:42:50 ${new Date(new Date().getTime() - 1000000).since()} //多久之前 16 minutes ago ${1275910970000.asdate('dd MMMM yyyy hh:mm:ss', 'fr')} //07 juin 2010 01:42:50 ${[id:'42', color:'red'].asAttr()} //属性表示方式,效果 id="42" color="red" html ${42.format('000.00')} // 042.00 ${42.page(10)} //页数计算 ${"lorum ipsum dolor".capAll()} // Lorum Ipsum Dolor ${"lorum ipsum dolor".cut('um')} // lor ips dolor ${"The <blink>tag</blink> is evil".escape().raw()} //The <blink>tag</blink> is evil ${(["red", "green", "blue"] as String[]).add('pink').join(' ')} //red green blue pink ${(['red', 'green', 'blue'] as String[]).contains('green')} //true ${(['red', 'green', 'blue'] as String[]).remove('green').join(' ')} //red blue
5、内置对象
Play中所有的内置对象: errors 验证错误信息结果集,对应play.data.validation.Validation.errors() flash Flash作用域,对应play.mvc.Scope.Flash lang 当前使用的语言,对应play.i18n.Lang messages 消息映射变量,对应play.i18n.Messages out 引用页面输出流,对应java.io.PrintWriter params 当前参数变量,对应play.mvc.Scope.Params play Play框架类,对应play.Playrequest 当前请求对象,对应play.mvc.Http.Request session Session作用域,对应play.mvc.Scope.Session
相关文章推荐
- js中数组(Array)的排序(sort)注意事项说明
- 完美解决ie8以下不兼容h5的方法
- CSS文本超出
- 搭建前端私有npm杂记
- iframe javascript:location.replace(url)路径问题
- html input密码显示为“*”
- C#通过html调用WinForm的方法
- 实践实践(dom)jQuery属性操作
- css px转rem工具,支持生产整个css文件统一修改
- [置顶] JavaScript本地预览图片功能
- 循环读取时 JS 对象属性的顺序遵循怎样的规则?
- jQuery Validate插件使用
- <html>标签
- js动态生成二维码图片
- nodejs中req.body对请求参数的解析问题
- jQuery之对话框
- jQuery导入Eclipse后报错解决方法
- JavaScript DOM加载
- 前端和后端的接口类
- js控制滚动条回到顶部