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模板的例子的更多相关文章

  1. typescript 自动编译 生成js文件

    项目文件 <?xml version="1.0" encoding="utf-8"?><Project ToolsVersion=" ...

  2. 将DataSet（DataTable)转换成JSON格式（生成JS文件存储）

    public static string CreateJsonParameters(DataTable dt) { /**/ /**/ /**/ /* /*********************** ...

  3. css文件和js文件后面带一个问号

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  4. css文件和js文件后面带一个问号----2015-1103

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  5. 由.def文件生成lib文件[转]

    最近在学习curl库时,碰到一个问题,从官网上下载了一个lib版的,却发现只有.dll,没有lib文件,感觉很奇怪,google了之后才知道,原来库作者的用意是让用户自己生成lib文件,下载到的lib ...

  6. ffmpeg文件生成m3u8文件及ts切片程序(一)

    ffmpeg文件生成m3u8文件及ts切片程序(一) 实现目标:输入本地文件,实现m3u8切片,功能点请看注释,注意:注释很重要. 参考: http://www.cnblogs.com/mystory ...

  7. ActiveX: 如何用.inf和.ocx文件生成cab文件

    ActiveX: 如何用.inf和.ocx文件生成cab文件  

  8. LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件

    参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx 本示例演示如何使用 语言集成查询 (LINQ) 和 LINQ to XML 从逗号分隔 ...

  9. 浏览器输入一个url的过程，以及加载完html文件和js文件的标志

    简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二 ...

随机推荐

  1. linux 查看并终止进程

    1,查看port被那个进程占用 比如: netstat -anp | grep 1160 ps:查看port1169被那个进程占用. 2.查找进程 比如 :ps -ef | grep 'tomcat' ...

  2. [Whole Web, Nods.js, PM2] Passing environment variables to node.js using pm2

    learn how to pass environment variables to your node.js app using the pm2 config file. This is usefu ...

  3. css 常见兼容性问题及解决方案

    css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧. 一. 浮动元素双边距. ①条件:ie6下,如果给元素设置 ...

  4. stack计算表达式的值

    9.52 使用stack对象处理带圆括号的表达式.遇到左圆括号时,将其标记下来.当你在一个左括号之后遇到右圆括号时,弹出stack对象中这两边括号之间的元素,直到遇到左括号,将左括号也一起弹出栈. 接 ...

  5. 认识CoreData-基础使用

    第一篇文章中并没有讲CoreData的具体用法,只是对CoreData做了一个详细的介绍,算是一个开始和总结吧. 这篇文章中会主要讲CoreData的基础使用,以及在使用中需要注意的一些细节.因为文章 ...

  6. Map的遍历方式

    public class Mapper { public static void main(String[] args) {  Map<String, String> map = new ...

  7. gulp 实践

    文档站YDoc 相关注意事项 sass 编译 目录结构 可以直接使用sass编译 ➜ ydoc git:(v2) ✗ sass ./sass/app.scss ./template/source/ap ...

  8. PHP克隆魔术方法

    克隆对象 __clone() $p2=clone $p; $p=>say(); 克隆对象的时候自动调用的方法 作用和构造方法一样是对新克隆的对象进行初始化 在这个方法中$this是副本所以可以给 ...

  9. Linux基础命令（三）

    一.常用命令—文件目录类命令 1.ls 列出指定或默认目录的文件信息 使用形式: ls [选项] [目录名] 实例: $ls $ls –als $ls /home/sq/Desktop $ls ./D ...

  10. skynet启动过程_1

    skynet的启动时需带个配置文件,这个文件其实是作为lua全局变量用的,见 int main(int argc, char *argv[]) { const char * config_file = ...