jquery tmpl

使用方法:
<script id="testTemplate" type="text/x-jquery-tmpl">
  //模板
</script>

有{{if}}{{/if}}、{{each}}{{/each}}等关键字
使用变量:${变量名称}



<!DOCTYPE html>

<html>

    <head>

        <title>jquery tmpl</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="js/jquery-1.8.1.min.js"></script>

        <script src="js/jquery.tmpl.min.js"></script>

        <script src="js/jquery.tmplPlus.min.js"></script>

    </head>

    <body>

        <div id="test"></div>

        <script id="testTemplate" type="text/x-jquery-tmpl">

            <h3>测试</h3>

            <ul>

                {{each arr}}

                <li><a href="${src}">${txt}</a></li>

                {{/each}}

            </ul>

        </script>

        <script>

            var data = [{"src":"http://www.cnblogs.com/kuikui","txt":"博客-测试一"},{"src":"http://www.cnblogs.com/kuikui","txt":"博客-测试二"},{"src":"http://www.cnblogs.com/kuikui","txt":"博客-测试三"}];

            var obj = {"title":"标题","arr":data};

            $("#testTemplate").tmpl(obj).appendTo("#test");

        </script>

    </body>

</html>

 

你可能感兴趣的:(jquery)