trimpath javascript的學習

時間 2019-11-08

標籤 trimpath javascript 學習欄目 JavaScript 简体版

原文原文鏈接

trimpath javascript trimpath demo

TrimPath是javascript模板引擎。

這幾天有一個項目涉及到trimpath這個框架，因此就花了一點時間研究了一下，這個框架和別的javascript框架不太同樣的地方就是模板的概念，就是頁面中若是引入這個框架的話，就能夠像jsp或着Asp那樣直接在頁面中混合寫javascript和的代碼，不用其它框架同樣在 javascript裏首先取得頁面控件的值，而後修改，而後再在javascript代碼裏賦值，這些是個人主要印像。

下面先貼出來一個demo,從這個看容易入手，用這個demo前固然先要先加入像用其它框架同樣加入這個框架的代碼
框架的官網主頁：
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
從上面下一個名字叫template.js的框架文件，這個文件能夠從官網上釋放的最新的包中找到。例如根據我如今下的版本能夠在這裏找到

Java代碼

trimpath-junction-1.1.22/junction_release/public/javascripts/trimpath

下面貼出demo的源碼

Java代碼

<html>
<head>
<script language="javascript" src="template.js"></script>
</head>
<body>
<div id="outputDiv">
</div>
<script language="javascript">
var data = {
products : [ { name: "mac", desc: "computer",
price: 1000, quantity: 100, alert:null },
{ name: "ipod", desc: "music player",
price: 200, quantity: 200, alert:"on sale now!" },
{ name: "cinema display", desc: "screen",
price: 800, quantity: 300, alert:"best deal!" } ],
customer : { first: "John", last: "Public", level: "gold" }
};
</script>
<textarea id="cart_jst" style="display:none;">
Hello ${customer.first} ${customer.last}.<br/>
Your shopping cart has ${products.length} item(s):
<table>
<tr><td>Name</td><td>Description</td>
<td>Price</td><td>Quantity & Alert</td></tr>
{for p in products}
<tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
<td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
</tr>
{forelse}
<tr><td colspan="4">No products in your cart.</tr>
{/for}
</table>
{if customer.level == "gold"}
We love you! Please check out our Gold Customer specials!
{else}
Become a Gold Customer by buying more stuff here.
{/if}
</textarea>
<script language="javascript">
// The one line processing call...
var result = TrimPath.processDOMTemplate("cart_jst", data);
// Voila! That's it -- the result variable now holds
// the output of our first rendered JST.
// Alternatively, you may also explicitly parse the template...
var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");
// Now, calls to myTemplateObj.process() won't have parsing costs...
var result = myTemplateObj.process(data);
// Setting an innerHTML with the result is a common last step...
document.getElementById("outputDiv").innerHTML = result;
// You might also do a document.write() or something similar...
</script>
</body>
</html>

研究上面的demo就基本能夠掌握這個框架的要點下面的路徑是在網上搜索到的一個教程，說的挺詳細的，這個教程也是從這個demo開始的，也有對個demo的詳細分析，建議看看這個教程

相關文章

相關標籤/搜索

JavaScript學習筆記

對象的學習

怎麼學JavaScript？

JavaScript的那些事

人是如何學習的

Python我的學習筆記

Thymeleaf 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<