代码改变世界

Go Web开发之Revel - 模板

2013-01-07 09:44  Danny.tian  阅读(3625)  评论(0)  编辑  收藏  举报

Revel 使用 Go Templates. 它搜索两个目录来查找模板:

  •  应用程序的 views 目录和全部子目录
  • Revel自己的 Templates 目录

Revel为错误页面提供模板(在开发模式中显示友好的编译错误), 但是应用程序可以通过创建一个相同名字的模板来重写它, 例如 app/views/errors/500.html

渲染上下文

Revel使用RenderArgs的数据字典执行模板. 除了应用程序提供的数据外, Revel提供了下面的入口:

模板函数

Go提供了一些模板函数用于你的模板中. Revel添加了如下这些, 你可以查看文档或源代码.

eq

一个简单的 "a== b"测试, 如下所示:

<div class="message {{if eq .User "you"}}you{{end}}">

set

设置一个变量到给定的上下文, 如下所示:

{{set . "title" "Basic Chat room"}}

<h1>{{.title}}</h1>

append

添加一个变量到一个数组或开始一个新数组到给定的上下文, 如下所示:

{{append . "moreScripts" "js/jquery-ui-1.7.2.custom.min.js"}}

{{range .moreStyles}}
  <link rel="stylesheet" type="text/css" href="/public/{{.}}">
{{end}}

field

一个input元素的帮助函数.

给定一个元素名称, 它返回一个包含了下面成员的struct

  • Id: 元素名称, 转换成一个适当的html元素的ID.
  • Name: 元素名称
  • Value: 元素在当前RenderArgs的值
  • Flash: 元素的falsh值
  • Error: 错误信息,任何与这个元素相关的错误信息
  • ErrorClass: 如果这里有一个错误为字面量字符串"error", 否则为""

查看文档

 

{{with $field := field "booking.CheckInDate" .}}
  <p class="{{$field.ErrorClass}}">
    <strong>Check In Date:</strong>
    <input type="text" size="10" name="{{$field.Name}}" class="datepicker" value="{{$field.Flash}}">
    * <span class="error">{{$field.Error}}</span>
  </p>
{{end}}

 

option

 

协助构造HTML的option元素, 结合field帮助函数, 如下所示:

 

{{with $field := field "booking.Beds" .}}
<select name="{{$field.Name}}">
  {{option $field "1" "One king-size bed"}}
  {{option $field "2" "Two double beds"}}
  {{option $field "3" "Three beds"}}
</select>
{{end}}

 

radio

协助构建HTML的radio元素, 结合field帮助函数, 如下所示:

{{with $field := field "booking.Smoking" .}}
  {{radio $field "true"}} Smoking
  {{radio $field "false"}} Non smoking
{{end}}

包含

Go模板允许你通过包含来组建模板, 如下所示:

{{include "header.html"}}

这里有两件需要注意的事:

  • 路径是相对的 app/views
  • 任何被包含的模板必须在根目录下(app/views). 这是一个(希望是临时的)限制

 

技巧

这个示例演示了Revel尝试有效的使用Go模板. 如下所示:

 

  • revel/samples/booking/app/views/header.html
  • revel/samples/booking/app/views/Hotels/Book.html

它利用帮助函数来在模板中设置title和额外的样式, header示例如下:

<html>
  <head>
    <title>{{.title}}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/public/css/main.css">
    <link rel="shortcut icon" type="image/png" href="/public/img/favicon.png">
    {{range .moreStyles}}
      <link rel="stylesheet" type="text/css" href="/public/{{.}}">
    {{end}}
    <script src="/public/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/js/sessvars.js" type="text/javascript" charset="utf-8"></script>
    {{range .moreScripts}}
      <script src="/public/{{.}}" type="text/javascript" charset="utf-8"></script>
    {{end}}
  </head>

模板包含它看起来像这样

{{set . title "Hotels"}}
{{append . "moreStyles" "ui-lightness/jquery-ui-1.7.2.custom.css"}}
{{append . "moreScripts" "js/jquery-ui-1.7.2.custom.min.js"}}
{{template "header.html" .}}

自定义函数

 

应用程序可以在模板中注册使用自定义函数, 示例如下:

 

func init() {
    rev.TemplateFuncs["eq"] = func(a, b interface{}) bool { return a == b }
}

 

 

 

至此结束.