Jquery tmpl 模板

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Tmpl</title>
<meta name="keywords" content="Tmpl" />

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
</head>
<body>

<script>
$(
function(){

$.tmpl($(
"#H").html(),
[{
"Name":"rhythmk1","Age":"12"},
{
"Name":"rhythmk2","Age":"12"},
{
"Name":"rhythmk3","Age":"12"},{"Name":"rhythmk4","Age":"12"},
{
"Name":"rhythmk5","Age":"12"},
{
"Name":"rhythmk6","Age":"12"},{"Name":"rhythmk7","Age":"12"}]
).appendTo(
"#PageContent");

$(
"#H").hide();

})
</script>

<ul id="PageContent">
<li>Age</li>
<li>Name</li>
</ul>
<ul id="H">
<li>${Age}</li>
<li>${Name}</li>
</ul>

</body>
</html>

 

 http://www.cnblogs.com/coffeedeveloper/archive/2012/07/25/2609204.html

 

1.简单使用:

引入:

<script 

src="http://common.cnblogs.com/script/jquery.js"       type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

<script type="text/javascript">

        var  jdata=[{ "Name": "rhythmk1", "Age": 12 },

                    { "Name": "rhythmk2", "Age": 12 },

                    { "Name": "rhythmk3", "Age": 15 },

                    { "Name": "rhythmk4", "Age": 16 }

        ];

        $(function () {

            $("#testTemplate").tmpl(jdata).appendTo("#list2");

        });

</script>

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

     <li>${Age}</li>

     <li>${Name}</li>

</script>

<ul id="list2"></ul>

2.对输出字段进行HTML 编码:

   <!--对数据HTML编码-->

在模板中设定 <li>{{html Name}}</li> ,则对此进行HTML编码。

 

3.模版中调用JS方法:

  如:

    function DoubleData(d)

    {

        return d + d;

}

调用则如下:

 <li>${ DoubleData(Age)}</li>

posted @ 2012-03-25 22:28  Rhythmk  阅读(3654)  评论(1编辑  收藏  举报
Rhythmk 个人笔记