jsmart语法介绍,前端jsmart学习

4883次浏览

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

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

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

首先下载jsmart,http://www.haorooms.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="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="smart-2.9.min.js"></script>
</head>
<body>

<script id="test_tpl" type="text/x-jsmart-tmpl"> 
   <h1>{$greeting}</h1>

   {foreach $books as $i => $book}
      <div style="background-color: {cycle values="cyan,yellow"};">
         [{$i+1}] {$book.title|upper} by {$book.author} 
            {if $book.price}                                
               Price: <span style="color:red">${$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 style="color:{$color}">[{$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 style="color:#000">[0][1] black</span>
<span style="color:#00F">[1][2] blue</span>
<span style="color:#0F0">[2][3] green</span>
<span style="color:#F00">[3][4] red</span>
<span style="color:#FFF">[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

Tags: jsmartjs

相关文章: