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: 100; 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' }