Soy文件生成JS文件 - 一个使用Google soy模板的例子

时间：2022-02-04 05:39:09

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'

}

相关文章