artTemplate模板引擎

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../template.js"></script>
<script src="../../../jquery.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test" type="text/html">
<% if (isAdmin) { %>

<h1><%=title%></h1>
<ul>
    <% for (var i = 0; i < list.length; i ++) { %>
        <li>索引 <%= i + 1 %> :<%= list[i] %></li>
    <% } %>
</ul>

<% } %>
</script>

<script>
$(function() {
    var data = {
        title: '基本例子',
        isAdmin: true,
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template.render('test', data);
    document.getElementById('content').innerHTML = html;
    $("#ref").click(function() {
        data.list[0] = $("#val").val();
        var html = template.render('test', data);
        document.getElementById('content').innerHTML = html;
    });
})
</script>
<input type="text" id="val"/><input type="button" id="ref" value=" 刷 新 "/>
</body>
</html>

一个简单的例子,点刷新时修改list第一个值

posted @ 2013-09-23 17:25  科学家会武术  阅读(296)  评论(0编辑  收藏  举报