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. 在大型软件中用Word做报表： 书签的应用

    本文转载:http://www.cnblogs.com/huyong/archive/2011/08/24/2151599.html 报表基本上在每一个项目中占有很大的比例,做报表也是我们开发人员必须 ...

  2. 理解C# Lazy<T>

    1.Lazy<T>解决什么问题? 考虑下面的需求,有个对象很大,创建耗时,并且要在托管堆上分配一大块空间.我们当然希望,用到它的时候再去创建.也就是延迟加载,等到真正需要它的时候,才去加载 ...

  3. git 设置

    系统乱码 项目中的编码统一设置为UTF-8编码. 设置系统的语言设置为 zh_UTF-8,把 export LANG=zh_CN.UTF-8 保存到~/.profile文件里. $ env|grep ...

  4. .Net程序猿玩转Android开发---(8)表格布局TableLayout

    表格布局TableLayout是Android中比較经常使用的一个布局控件,既然是表格,肯定有行和列,TableLayout中的行有TableRow组成.列依据每行控件的数量来确定 假如第一行有3个控 ...

  5. 原创　C# 正则表达式　读写 Ini　文件

    昨天遇到读ini文件的问题,我知道C#里没有提供相应的类,所有的.net配置都是xml方式存储的. 读取ini文件,很多人直接google一把,然后添加dll引用.介绍的比较详细的,如: C#如何读写 ...

  6. 常用工具之zabbix

    简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网 络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...

  7. C++面试题算法

    #include <iostream> #include <string> using namespace std ; /* 题目:给一个字符串.例如 "ababc& ...

  8. Eclipse的LogCat总是自动清空怎么办？

    我们经常会遇到这样一种情况,由于Log太多,导致我们的LogCat总是被自动清空,该怎么办?错误信息看不到,How to do? 其实,我们通过adb shell来解决这个问题. 1.配置环境变量 环 ...

  9. Java基础知识强化之IO流笔记50：IO流练习之 复制多级文件夹的案例

    1. 复制多级文件夹的案例 需求:复制多级文件夹       数据源:E:\JavaSE\day21\code\demos     目的地:E:\   分析:         A:封装数据源File ...

  10. (转载)重温SQL——行转列，列转行

    原文地址:http://www.cnblogs.com/kerrycode/archive/2010/07/28/1786547.html 行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通 ...