炫意html5
最早CSS3和HTML5移动技术网站之一

jsmart语法介绍,前端jsmart学习

PHP的Smarty模板,使HTML语言从php中独立出来,很多项目中都是用Smarty模板来前端绑定的。著名的商城开源程序Ecshop的模板就是在smarty模板基础上稍加改动,删除了很多多余不用的东西而改编完成的,所以你Ecshop模板和smarty模板大同小异。但是smarty模板的使用,必须在php中指定。关于php smarty模板的更多知识,后面会陆续补充!

回归正题,jsmart和smarty模板最大的区别就是jsmart不用指定,只要有数据,随时都可以用!效果很强大!任何一个html页面,只要引入jsmart ,用ajax调用后端接口,都可以轻松绑定!

今天主要介绍一下jsmart的简单用法和语法!

首先下载jsmart,http://www.xyhtml5.com/uploads/js/smart-2.10.min.rar

你也可以jsmart官网下载:https://code.google.com/p/jsmart/downloads/detail?name=smart-2.10.min.js&can=2&q=

引用方法,头部引用就可以:

<script type="text/javascript" src="https://www.xyhtml5.com/post/js_jsmart/smart-2.10.min.js"></script>

调用方法是通过如下来的

var tpl = new jSmart(document.getElementById('test_tpl').innerHTML);
var res = tpl.fetch(data);
document.write( res );

看下他的官方例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jSmart example</title>
<script type="text/javascript" src="https://www.xyhtml5.com/post/js_jsmart/smart-2.9.min.js"></script>
</head>
<body>
<script type="text/x-jsmart-tmpl">
<h1>{$greeting}</h1>
{foreach $books as $i => $book}
<divcyan,yellow"};">
[{$i+1}] {$book.title|upper} by {$book.author}
{if $book.price}
Price: <span>${$book.price}</span>
{/if}
</div>
{foreachelse}
No books
{/foreach}
Total: {$book@total}
</script>
<script type="text/javascript">
var data = {
greeting: 'Hi, there are some JScript books you may find interesting:',
books: [
{
title  : 'JavaScript: The Definitive Guide',
author : 'David Flanagan',
price  : '31.18'
},
{
title  : 'Murach JavaScript and DOM Scripting',
author : 'Ray Harris'
},
{
title  : 'Head First JavaScript',
author : 'Michael Morrison',
price  : '29.54'
}
]
};
var tpl = new jSmart(document.getElementById('test_tpl').innerHTML);
var res = tpl.fetch(data);
document.write( res );
</script>
</body>
</html>

是不是很简单呢?

我们用ajax调用也很简单,ajax返回的时候,同样运用这三句话

var tpl = new jSmart(document.getElementById('模板ID').innerHTML);
var res = tpl.fetch(d);
$("#页面显示ID").html(res); 

下面再来总结一下jsmart的语法:

首先来看if语句,if语句

{if},{elseif},{else}
{if $foo != 'bar'}
bar
{elseif $foo == 'abc'}
buh
{else}
smth else
{/if}

再看foreach语句

数据如下:

{$colors = [black=>'#000', blue=>'#00F', green=>'#0F0', red=>'#F00', white=>'#FFF']}

用法如下:

{foreach $colors as $name=>$color}
{if $color@first}
<div id=colors>
{/if}
<span>[{$color@index}] [{$color@iteration}] {$name}</span>
{if $color@last}
</div>
{/if}
{foreachelse}
'colors' array is empty
{/foreach}
{if $color@show}
num of colors: {$color@total}
{/if}

显示如下:

<div id=colors>
<span>[0][1] black</span>
<span>[1][2] blue</span>
<span>[2][3] green</span>
<span>[3][4] red</span>
<span>[4][5] white</span>
</div>
num of colors: 5

还可以使用javascript

用法如下:

{$foo = 'bar'}
{javascript}
if (foo == 'bar')
{
foo = 'buh';
$this.newVar = 'new';
}
{/javascript}
foo: {$foo}
newVar: {$newVar}

输出:

foo: buh
newVar: new

{for} {forelse}用法,{for} {forelse}主要用于简单的循环,有如下用法:

{for $var=$start to $end}
{for $var=$start to $end step $step}

例子如下:

{for $i=1 to 5}
{if $i == 3}
{continue}
{/if}
{$i}
{/for}
{for $i=-5 to -1}
{$i}
{/for}
{$num=10}
{for $i=$num to 1 step -2}
{$i}
{/for}
{$ar = ['a','b','c','d']}
{for $i=0 to $ar|count-1 max=3}
{$ar[$i]}
{/for}
{$empty = []}
{for $i=0 to $empty|count-1}
{$ar[$i]}
{forelse}
array is empty
{/for}

输出:

1 2 4 5
-5 -4 -3 -2 -1
10 8 6 4 2
a b c
array is empty

以上几个是比较常用的,更多API请看 https://code.google.com/p/jsmart/w/list

炫意HTML5 » jsmart语法介绍,前端jsmart学习

Java基础教程Android基础教程