Soy文件生成JS文件 - 一个使用Google soy模板的例子
1.下载工具包，后解压。
http://closure-templates.googlecode.com/files/closure-templates-for-javascript-latest.zip
2.运行命令：
java -jar SoyToJsSrcCompiler.jar --outputPathFormat mainui.js mainui.soy
以下是例子：
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebSite - Home</title> <link href="styles/main.css" rel="stylesheet" type="text/css"> <script src="scripts/lib/jquery-1.8.2.min.js"></script>
<script src="scripts/lib/soyutils.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/mainui.js"></script>
<script src="strings/strings.js"></script>
</head> <body>
</body>
</html>
2. main.css
@charset "utf-8";
footer {
display: none;
}
#footer-content {
text-align: center;
}
nav {
position: fixed;
z-index:;
top: 20px;
right: 15px;
}
#logo {
font-size: 24px;
font-weight: bold;
color: #353535;
}
a {
text-decoration: none;
}
a.active {
font-weight: bold;
color: #353535;
}
a:active {
color: #353535;
}
a:hover {
color: #4183c4;
}
ul {
list-style-type: none;
}
li.horizontal{
float: left;
}
#section-home {
margin-top: 180px;
margin-right: auto;
margin-bottom: 180px;
margin-left: 80px;
}
#logo-big {
font-size: 60px;
font-weight: bold;
color: #353535;
}
#logo-description {
font-size: 60px;
font-weight: bold;
color: #999;
float: left;
}
#li-logo-big {
text-align: left;
width: 400px;
}
a:hover {
cursor:pointer;
}
nav a {
margin-right: 5px;
margin-left: 5px;
}
3. main.js
$(document).ready(function(){
alert("document ready");
$("body").html(website.ui.main.body(website.strings.body));
$("#main-content").html("Home");
$("#nav-home").click(function(){
$("#nav-home").addClass("active");
$("#nav-guide").removeClass("active");
$("#nav-faq").removeClass("active");
$("#nav-dashboards").removeClass("active");
$("#main-content").html("Home");
$("title").text(website.strings.title.home);
});
$("#nav-guide").click(function(){
$("#nav-guide").addClass("active");
$("#nav-home").removeClass("active");
$("#nav-faq").removeClass("active");
$("#nav-dashboards").removeClass("active");
$("#main-content").html("Guide");
$("title").text(website.strings.title.guide);
});
$("#nav-faq").click(function(){
$("#nav-faq").addClass("active");
$("#nav-home").removeClass("active");
$("#nav-guide").removeClass("active");
$("#nav-dashboards").removeClass("active");
$("#main-content").html("FAQ");
$("title").text(website.strings.title.faq);
});
$("#nav-dashboards").click(function(){
$("#nav-dashboards").addClass("active");
$("#nav-home").removeClass("active");
$("#nav-faq").removeClass("active");
$("#nav-guide").removeClass("active");
$("#main-content").html("Dashboards");
$("title").text(website.strings.title.dashboards);
});
});
4. mainui.soy 和 mainui.js
{namespace website.ui.main}
/**
* The body content.
* @param navHomeText The text of link home.
* @param navGuideText The text of link guide.
* @param navFAQText The text of link faq.
* @param navDashboardsText The text of link dashboards.
* @param copyright The text of copyright.
*/
{template .body}
<header>
<a id="logo" href="">WebSite</a>
<nav>
<a id="nav-home" class="active">{$navHomeText}</a>
<a id="nav-guide">{$navGuideText}</a>
<a id="nav-faq">{$navFAQText}</a>
<a id="nav-dashboards">{$navDashboardsText}</a>
</nav>
<hr/>
</header>
<div id="main-content">
</div>
<footer>
<hr/>
<div id="footer-content">{$copyright}</div>
</footer>
{/template}
// This file was automatically generated from mainui.soy.
// Please don't edit this file by hand. if (typeof website == 'undefined') { var website = {}; }
if (typeof website.ui == 'undefined') { website.ui = {}; }
if (typeof website.ui.main == 'undefined') { website.ui.main = {}; } website.ui.main.body = function(opt_data, opt_ignored) {
return '<header><a id="logo" href="">WebSite</a><nav><a id="nav-home" class="active">' + soy.$$escapeHtml(opt_data.navHomeText) + '</a><a id="nav-guide">' + soy.$$escapeHtml(opt_data.navGuideText) + '</a><a id="nav-faq">' + soy.$$escapeHtml(opt_data.navFAQText) + '</a><a id="nav-dashboards">' + soy.$$escapeHtml(opt_data.navDashboardsText) + '</a></nav><hr/></header><div id="main-content"></div><footer><hr/><div id="footer-content">' + soy.$$escapeHtml(opt_data.copyright) + '</div></footer>';
};
5. strings.js
if (typeof website == 'undefined') { var website = {}; }
if (typeof website.strings == 'undefined') { website.strings = {}; }
website.strings.title = {
home:'WebSite - Home',
guide:'WebSite - Guide',
faq:'WebSite - FAQ',
dashboards:'WebSite - Dashboards',
}
website.strings.body = {
navHomeText:'Home',
navGuideText:'Guide',
navFAQText:'FAQ',
navDashboardsText:'Dashboards',
copyright:'© 2014 LDL. All rights reserved.'
}
website.strings.mainContent = {
logDescription:'The description'
}
Soy文件生成JS文件 - 一个使用Google soy模板的例子的更多相关文章
- typescript 自动编译 生成js文件
项目文件 <?xml version="1.0" encoding="utf-8"?><Project ToolsVersion=" ...
- 将DataSet（DataTable)转换成JSON格式（生成JS文件存储）
public static string CreateJsonParameters(DataTable dt) { /**/ /**/ /**/ /* /*********************** ...
- css文件和js文件后面带一个问号
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- css文件和js文件后面带一个问号----2015-1103
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- 由.def文件生成lib文件[转]
最近在学习curl库时,碰到一个问题,从官网上下载了一个lib版的,却发现只有.dll,没有lib文件,感觉很奇怪,google了之后才知道,原来库作者的用意是让用户自己生成lib文件,下载到的lib ...
- ffmpeg文件生成m3u8文件及ts切片程序(一)
ffmpeg文件生成m3u8文件及ts切片程序(一) 实现目标:输入本地文件,实现m3u8切片,功能点请看注释,注意:注释很重要. 参考: http://www.cnblogs.com/mystory ...
- ActiveX: 如何用.inf和.ocx文件生成cab文件
ActiveX: 如何用.inf和.ocx文件生成cab文件
- LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件
参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx 本示例演示如何使用 语言集成查询 (LINQ) 和 LINQ to XML 从逗号分隔 ...
- 浏览器输入一个url的过程，以及加载完html文件和js文件的标志
简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二 ...
随机推荐
- Ubuntu下开启root登陆
亲手安装过Ubuntu的童鞋都知道,默认安装只会添加一个普通用户名和密码,而超级用户权限则是利用sudo命令来执行.在Ubuntu下使用root登陆或者在shell中用su命令切换到root时会提示错 ...
- 通达OA 小飞鱼工作流在线培训教程文件夹及意见征集
最近通达OA技术交流群有不少朋友反映说表单设计这块 改动样式的问题,这块须要html和css的改动.本来最近正好要在工作流这块准备做一个系列的课程,都是基础的设置主要是给刚接触工作流的朋友用的,大家有 ...
- CSS3:clip-path具体解释
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 依据她的以往经验,这个站点的HTML和CSS是全然在她的能力范围以内,于是我帮助她完毕了这个效果.显示na ...
- linux下lighttpdserver的具体安装步骤 以及对flv流媒体的支持配置
准备条件: a,创建/usr/local/lighttpd文件夹,用于安装lighttpd b,创建lighttpd用户password为lighttpd账号,用于lighttpd的启动用户 c,安装 ...
- xcode 高亮
Cmd+E, Cmd+F and Cmd+G combo is usefull. Depending on why you want to do this, edit all in scope (Ct ...
- 给未来的你——李开复2011级大学新生演讲
2011年09月26日08:30 来源:<中国青年报> <中国青年报>的读者朋友们: 你们肩负着中华的未来,你们身上正涌动着创新的血脉! 无论你在哪所学校,哪个城市,你都是与众 ...
- [转] Spring - Java Based Configuration
PS: Spring boot注解,Configuration是生成一个config对象,@Bean指定对应的函数返回的是Bean对象,相当于XML定义,ConfigurationProperties ...
- Add an IPv6 route through an interface
Not often needed, sometimes in cases of dedicated point-to-point links. 7.4.1. Using "ip" ...
- p
都不知道简历去投什么地方.游戏都卖不出去,又做不出口碑好的.这些人是心存侥幸还是心存坚持. 感觉自己搞不清楚就很难再出发.
- 关于调用系统照相机Activity被销毁问题解决
<activity android:name=".visitplan_finish" android:co ...