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. 微信.NET 微信开发 自己主动内容回复 ASP.NET C#代码

    微信开发中,首先遇到的问题就是处理怎样接收和响应用户消息 , 本文将向大家介绍一下方法和关键的代码. 本文使用的接口库是  :https://github.com/chendong152/Weixin ...

  2. 自己动手写CPU之第七阶段（7）——乘累加指令的实现

    将陆续上传本人写的新书<自己动手写CPU>.今天是第30篇.我尽量每周四篇 亚马逊的销售地址例如以下.欢迎大家围观呵! http://www.amazon.cn/dp/b00mqkrlg8 ...

  3. MySQL DBA教程：Mysql性能优化之缓存参数优化

      在平时被问及最多的问题就是关于 MySQL 数据库性能优化方面的问题,所以最近打算写一个MySQL数据库性能优化方面的系列文章,希望对初中级 MySQL DBA 以及其他对 MySQL 性能优化感 ...

  4. Linux--------------安装nginx ftp

    阿里云服务器ECS centos7.2搭建nginx环境以及负载均衡 http://blog.csdn.net/ul646691993/article/details/52104082

  5. 有关Color和Drawable你所不知道的那些内容

    Android开发中,我们经常会用到Color或Drawable,有时他们是可以混用的,有时却有严格的区别. Drawable 体系结构 Drawable是可绘制物件的一般抽象.与View不同,Dra ...

  6. Spring3 + Spring MVC+ Mybatis 3+Mysql 项目整合（注解及源码）

    Spring3 + Spring MVC+ Mybatis 3+Mysql 项目整合(注解及源码) 备注: 之前在Spring3 + Spring MVC+ Mybatis 3+Mysql 项目整合中 ...

  7. asp.net Ajax Post 请求一般处理程序

    其实很早就开通博客园了,一直想写些有价值的东西,供自己以后查阅的同时,也可以帮助别人遇到此类问题时能有一个好的解决方法.但是由于各种原因, 就没有实施我的想法.今天突然很想写下一篇文章,不知道我的第一 ...

  8. Mysql下在某一列后即表的某一位置添加新列的sql语句

    Mysql简介 MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司.MySQL被广泛地应用在Internet上的中小型网站中.由于其体积小.速度快.总体拥有成本低,尤 ...

  9. onActivityResult不被执行的问题。

    1.首先,返回的Activity必须使用startActivityForResult启动. 2.其次,在返回的Activity中必须保证setResult方法在finish方法之前执行,否则onAct ...

  10. 脱离Xcode，程序在模拟器中无法运行

    今天在调试项目的时候 突然发现,如果项目不通过Xcode启动而是直接通过模拟器进行启动,程序闪一下马上退出,并且不是闪退,而是跑到后台去了,并且后台的程序同样无法启动.找了好多解决办法,最后的解决方案 ...