JavaScript Templates

翻译:ShiningRay @ Nirvana Studio

(译者:JsWiki的第一个版本是用ASP+JavaScript写的,中间就用到了它)

对于Web应用的开发者,来自 TrimPathJavaScript Templates 模版引擎是一个轻量的 APL / GPL 开源 组件,他让你的程序运行在Web浏览器中的时候可以直接基于模版编程(像PHP/ASP/JSP)。

  • The JST 引擎是完全用标准JavaScript写成的。

  • 他支持一套丰富的模版标记语法,和FreeMarker, Velocity, Smarty十分相似。

  • 对于大量的硬编码的字符串连接和主流的DOM/DHTML处理来说,JST是一个更容易阅读的替代方案。

借助JavaScript Templates来创建你自己的rich web application(像GMail/OddPost/Bloglines)。

更多信息:

JST 10 分钟简介

首先,在我们的HTML页面中,我们载入TrimPath JST组件到浏览器中

接下来,建立一些结构化JavaScript数据——仅仅是一些对象和数据

下面,这是一个JST模版的例子,它可以指导如何“渲染”数据。我们把我们的JST模版放到HTML页面的隐藏的<textarea>标签中:

这里是显示如何利用 API进行模版处理的代码

返回的结果是:

除了可以从 <textarea>元素中获取我们的模版之外,我们也可以从JavaScript的字符串中获取:

你也许想立即看看这个,JST demo page.


我应该把JST的模版放在哪里?

在上面的介绍中,我们把我们JST模版放在了HTML页面的隐藏的<textarea>标签中。

  • 当然,你可以在一个页面中有多个 <textarea> 元素,来保存不同的JST模版。

    • 一般的语法是:<textarea id="my_template_jst" style="display:none;"> ... 模版内容 ... </textarea>

    • 把JST的<textarea>放入<form>中必须要谨慎,除非你想在点击提交时把他们发送到服务器。

  • 为何使用 <textarea>?

    • <textarea> 元素有一个很好的特性是不会把它内部的代码innerHTML的格式搞乱。

      • <textarea>的innerHTML的稳定性十分重要因为JST语法允许在任何奇怪的位置放入一些控制流标记(如 if/elseif/for),甚至在HTML标签中,例如:

        • <option value="${country.name}" {if country.name == currCountry}selected{/if}>

      • 就和大多数服务器端模版语言一样,JST的语法并不是真正的HTML/XHTML/XML。因此,使用<textarea>来存放JST模版是最好的。

    • 关于<textarea>要注意: 浏览器会转化<textarea>的内容中的 < 和 > 变成 &lt; 和 &gt;。

      • 所以,TrimPath.parseDOMTemplate() 和 TrimPath.processDOMTemplate() 会自动把 < 和 > 转化回来,这样你仍然可以使用这个模版。

还有,你也可以把 *.jst 文件放在Web服务器上,并且通过XMLHttpRequest 或者是隐藏的iframe把他们载入到浏览器中。

服务器端 JST 执行

我们设计JST时不仅让她可以在浏览器中运行同时还可以在任何单独的JavaScript解释器中运行(例如 Mozilla Rhino 或者是 SpiderMonkey)。核心的 JST 引擎不会依赖关键的DOM/DHTML/浏览器。

“JavaScript Templates”的5个回复

  1. 文章非常好
    但你们的网页版面非常的不友好
    中间一条,不利浏览,
    文章目录找查也是一整排,一条线通到底,好难看.

发表评论

电子邮件地址不会被公开。 必填项已用*标注