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:;

    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模板的例子的更多相关文章

typescript 自动编译生成js文件
项目文件 <?xml version="1.0" encoding="utf-8"?><Project ToolsVersion=" ...
将DataSet（DataTable)转换成JSON格式（生成JS文件存储）
public static string CreateJsonParameters(DataTable dt) { /**/ /**/ /**/ /* /*********************** ...
css文件和js文件后面带一个问号
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
css文件和js文件后面带一个问号----2015-1103
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
由.def文件生成lib文件[转]
最近在学习curl库时,碰到一个问题,从官网上下载了一个lib版的,却发现只有.dll,没有lib文件,感觉很奇怪,google了之后才知道,原来库作者的用意是让用户自己生成lib文件,下载到的lib ...
ffmpeg文件生成m3u8文件及ts切片程序(一)
ffmpeg文件生成m3u8文件及ts切片程序(一) 实现目标:输入本地文件,实现m3u8切片,功能点请看注释,注意:注释很重要. 参考: http://www.cnblogs.com/mystory ...
ActiveX: 如何用.inf和.ocx文件生成cab文件
ActiveX: 如何用.inf和.ocx文件生成cab文件
LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件
参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx 本示例演示如何使用语言集成查询 (LINQ) 和 LINQ to XML 从逗号分隔 ...
浏览器输入一个url的过程，以及加载完html文件和js文件的标志
简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二 ...

随机推荐

Android UI开发第三十三篇——Navigation Drawer For Android API 7
Creating a Navigation Drawer中使用的Navigation Drawer的android:minSdkVersion="14",现在Android API ...
node.js在windows下的学习笔记(1)---安装node.js
1.首先打开http://www.nodejs.org/ 2.选择DOWNLOADS,跳转到下面的画面,我的系统是windows7的32位.所以选择.msi的32bit版本. 3.下载后,得到一个5. ...
TreeView查获节点并选中节点
TreeView查获节点并选中节点如果有多个节点则会继续查找下一个节点支持关键字搜索 private void SearchNodes(string SearchText, TreeNode Sta ...
shell 中函数放回字符串问题
shell 中函数放回字符串问题 shell 中不可以直接 return 字符串 ,可以return 数字.如果要return 字符串改为 echo "hello world" ...
How to add route for IPV6 interface
Firewall : ifconfig eth1 inet6 add 2000::1/64 ifconfig eth4 inet6 add 5000::1/64 ------------------- ...
Cookie中图片的浏览记录与cookie读取servle时路径的设置（文字描述）
public class ShowServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSer ...
jhipster
Client side: yeoman,grunt,bower,angularjs Server side: maven,spring,spring mvc rest,spring data jpa
【转】SharePoint 中实现ReportView
微软的Visual studio提供了ReportViewer控件以及RDLC报表设计工具.下文主要介绍如何在Sharepoint 2010项目开发中使用ReportViewer和RDLC生成项目报表 ...
JQuery设置input属性(disabled、enabled)
document.getElementById("removeButton").disabled = false; //普通Js写法 $("#removeButton&q ...
nginx上搭建HLS流媒体服务器
http://blog.csdn.net/cjsafty/article/details/7922849 简介:HTTP Live Streaming(缩写是 HLS)是一个由苹果公司提出的基于HTT ...

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

Soy文件生成JS文件 - 一个使用Google soy模板的例子的更多相关文章

随机推荐

热门专题