jquery tmpl模板

jquery.tmpl模板是用模版生成html的框架其中的一种。

首先需要下载tmpl文本,引入到你的html文件中,在html文件中写代码

举例:

<!DOCTYPE html>
<html>
<body>
<head>
<script type="text/javascript" src="../javascript/item_list.js" ></script>
    <script type="text/javascript" src="../javascript/jquery.tmpl.min.js" ></script>
    <script id="form" type="text/x-jquery.tmpl">
         <tr>
                <td>${classification}</td>
                <td>${name}</td>
                <td>${price}</td>
                <td>${unit}</td>
         </tr>
    </script>
</head>

${}:花括号里面放的是变量,也可以放表达式。等价于{{= }}需要注意的是等号后面有空格的。

那当我需要渲染的时候该怎么办呢?

代码:$(#form).tmpl(  )

$(#form):是选取要进行渲染的标签,tmpl( )将传入的json对象绑定到模板上。

当我把对象绑定到模板上然后在哪展示呢

 <div>
        <table id="product_list">
            <thead>
            <tr>
                <th>分类</th>
                <th>名称</th>
                <th>单价(元)</th>
                <th>单位</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>

 所以我写了个表头

appendTo()被选元素的结尾插入指定元素。

$(#form).tmpl(  ).appendTo(#product_list):将json文件绑定模板,需要渲染东西标签添加到标签id为product_list下。

 

猜你喜欢

转载自1752306891.iteye.com/blog/2337455