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

 

posted @ 2014-07-26 14:12  Ldlchina  阅读(1717)  评论(0)  编辑  收藏  举报