Jquery Template

最新推荐文章于 2024-03-22 09:43:15 发布

weixin_34344677

最新推荐文章于 2024-03-22 09:43:15 发布

阅读量674

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/lylooooo/p/6879924.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery Template</title>
        <!-- 第一步：引入引擎文件  两个： JQUERY库文件，JQUERY TEMPLATE模板引擎-->
        <script src="/js/jquery.js"></script>
        <script src="/js/jquery.tmpl.min.js"></script>
    </head>
    <body>
        <div id="box1"></div>
        
        <!--
            第二步：编写模板
                使用 script标签来编写模板， 必须有两个必须 id 和 type
                type属性可以是 text/x-jquery-tmpl 和 text/html
        -->
        <script id="mytmpl" type="text/x-jquery-tmpl">
            <h1>{{= title}}</h1>
            <ul>
                {{each(i,value) lists}}
                <li>{{= i}}的值是：{{= value}}</li>
                {{/each}}
            </ul>
        </script>
        
        <!-- 第三步： 渲染模板 -->
        <script>
            $(function(){
                var data={title:'我又500万啦',lists: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};不要遍历了
                //渲染模板的语法： $('模板ID').tmpl(JSON数据).appendTo('HTML元素ID');
                $('#mytmpl').tmpl(data).appendTo('#box1');
            });
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/lylooooo/p/6879924.html

weixin_34344677

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery Template

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Jquery Template</title> <!-- 第一步：引入引擎文件两个： JQUERY库文件，JQUERY TEMP...
复制链接

扫一扫