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地址,如果有就直接用,没有的话,就按域名的二 ...
随机推荐
- VS中调用SQL SERVER存储过程
存储过程是经过编译的,永久保存在数据中的一组SQL语句,通过创建和使用存储过程能够提高程序的重用性和扩展性,为程序提供模块化的功能,还有利于对程序的维护和管理.以下就详谈一下,VB.NET怎样调 ...
- AWS SQS DOC AND RUBY DEMO
# Amazon SQS 搜集整理aws sqs 的文档以及使用Ruby demo ## Amazon Simple Queue Service (SQS) 是一个可伸缩且可靠的消息传递框架,能够使用 ...
- 步步为营Hibernate全攻略（一）构建Hibernate框架环境
任何一项新技术的出现都有它的必然性,Hibernate也不例外,所以在掌握Hibernate的具体应用之前我们一定先要了解Hibernate是什么?使用Hibernate会给我们的程序开发带来哪些好处 ...
- System Address Map Initialization in x86/x64 Architecture Part 2: PCI Express-Based Systems
原文 http://resources.infosecinstitute.com/system-address-map-initialization-x86x64-architecture-pa ...
- C中sizeof()的用法——32位和64位下的sizeof（）
机器平台:X86_64 处理器 操作系统:Red Hat 4.1.2-14 编译器: gcc version 4.1.2 20070626 Size of char is: ...
- Ubuntu远程桌面xrdp方法
xrdp方式,该方法支持多用户登录并远程桌面. 首先在Ubuntu上安装GNOME界面,在终端输入命令: sudo apt-get install gnome-panel 安装完成后注销用户. 点击自 ...
- Markdown 添加 Latex 数学公式
添加公式的方法 Latex 数学公式语法 添加公式的方法 行内公式 $行内公式$ 行间公式 $$行间公式$$ Latex 数学公式语法 角标(上下标) 上标命令^{} 下标命令_{} 上下标命令用来放 ...
- JAVA锁的可重入性
机制:每个锁都关联一个请求计数器和一个占有他的线程,当请求计数器为0时,这个锁可以被认为是unhled的,当一个线程请求一个unheld的锁时,JVM记录锁的拥有者,并把锁的请求计数加1,如果同一个线 ...
- Asp.net上传出现“超过了最大请求长度”的问题解决方法
在开发ASP.NET网站后台管理系统时,我们可能会遇到这样的问题:上传大于4M的文件时,会提示错误:错误信息如下: 1.异常详细信息:超过了最大请求长度. 2.引发异常的方法:Byte[] GetEn ...
- SQL Developer 4.1.3
http://www.oracle.com/technetwork/developer-tools/sql-developer/downloads/index.html SQL DeveloperDo ...