Template模板方法的使用

art-template模板渲染HTML
该方法的核心思想就是将json数据传入按照art-template模板编写模板中去。

1> 引入js文件

   	<script src="./js/template-web.js" type="text/javascript" charset="utf-8"></script>

2> 准备json对象

    例如： var obj1 = {
   teams:[]};
               var obj2 = {
   arr：[a,b,c,d,e]};
    要求：后台服务器fastjson帮助我们将需要展示的数据，转换成json字符串
          能够看到json数据

3> 制定模版

    <script id="模版的唯一标识"  type="text/html">
           /*模板例子如下*/
                {
    {
    a}}
                {
    {
    b}}
                {
    {
    c}}
          在这个里面制定模板
    </script>
    
   <template id="模板的唯一标识">
     /*模板例子如下*/
                {
  {a}}
                {
  {b}}
                {
  {c}}
          在这个里面制定模板
   </template>

4> 渲染

  <script type="text/javascript">
          /*找到你想要操作的块*/   
  	var showDiv = document.querySelector("#id选择器");
  	   
  	//template(模版的id,json格式的对象);
  	 /*在那个块中键入*/
  	showDiv.innerHTML = template("模版的唯一标识", json对象名);
  </script>
  
  // 基于模板名渲染模板
  template(filename, data);
  filename: 对于模板的script标签的id;
  data: js获取的数据（一般是后端返回的序列化json字符串）

5> 常用语句

输出

    {
  {value}}             // 目前最常见的双花括号数据绑定
    {
  {data.key}}       // 对象点方式
    {
  {data['key']}}    // 另外一种对象处理方式
    {
  {a ? b : c}}       // 三元运算
    {
  {a || b}}           // 或运算  防止 undefined 报错
    {
  {a + b}}          // 并列输出
    {
  {$data['list']}} 

if 选择

{
  {if flag == '1'}}
     展示的内容
{
  {else if flag == "2"}}
     展示的内容
{
  {else}}
     展示的内容
{
  {/if}}

循环

 注意：
 target 支持 array 与 object 的迭代，其默认值为 $data。
 $value 与 $index 可以自定义：{
  {each target val key}}。
  -- stuArray 是json中属性名 
  -- 没有设置别名的时候  {
  {$index}} 索引  {
  {$value}}获取数组中值
  -- stu是别名，可以修改
  -- index 数组的索引，从0开始
  {
  {each stuAr