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地址,如果有就直接用,没有的话,就按域名的二 ...
随机推荐
- SQL Server查询数据库中所有的表名及行数
SELECT a.name, b.rows FROM sysobjects AS a INNER JOIN sysindexes AS b ON a.id = b.id WHERE (a.type = ...
- arcgis 获得路径和环境变量信息
import arcpy import sysimport osimport string reload(sys) sys.setdefaultencoding("utf8")sc ...
- iOS开发篇-申请开发者账号流程
1.注册一个苹果的apple id申请apple id的地址: https://appleid.apple.com/account 2.如申请公司账号,请使用以下链接免费获取邓白氏号码,以下的申请表格 ...
- the third assignment of software testing
没有网的日子不好过,Junit4下不下来,先用androidTestCase实现一个. 遇到了几个bug. 首先是除0问题. public void testDivide(){ result=calc ...
- cobbler部署
1.cobbler介绍 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的 ...
- modelsim打开.wlf文件的方法（原创）
运行vsim -c -l vsim.log -wlf vsim.wlf work.tb work.glbl之后,会在不启动modelsim的情况下完成仿真,并且会把仿真波形记录下来(以.wlf文件格式 ...
- Atom编辑器入门到精通(三) 文本编辑基础
身为编辑器,文本编辑的功能自然是放在第一位的,此节将总结常用的文本编辑的方法和技巧,掌握这些技巧以后可以极大地提高文本编辑的效率 注意此节中用到的快捷键是Mac下的,如果你用的系统是Win或者Linu ...
- Magento入门开发教程
Modules->模块 Controller->控制器 Model->模型 Magento是这个星球上最强大的购物车网店平台.当然,你应该已经对此毫无疑问了.不过,你可能还不知道,M ...
- Magento的布局(Layout)，块(Block)和模板(Template)
public function indexAction() { //remove our previous echo //echo 'Hello Index!'; $this->loadLayo ...
- xml_02
1.xml 2.对于XML文档的约束 |-DTD <!DOCTYPE 根元素 [ <!ELEMENT 元素名 (xx)> <!ATTLIS ...