JQuery Template Engine 简介 1

现在的web开发用到javascript越来与多,其中jquery已经是事实上最流行的javascript library了

经常我们会使用javascipt来操作 dom/html 例如 html="<a href='#'>test </a>";

不过这样的代码难以维护和阅读

JQuery1.4.3 以及以上的版本已经支持了template engine的功能 (当然,还有很多第三方的实现,例如microsoft template engine, 不过我还是喜欢build-in的功能,,不要额外下载js文件 不用担心兼容性的问题)

说了这么多,还是尽快给一个demo让大家对template engine有一个快速的印象吧

  

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
    <script id="movieTemplate" type="text/x-jquery-tmpl">    
     <li><b>${Name}</b> (${ReleaseYear})</li>
    </script>

    <ul id="movieList">
    </ul>

    <script>
        var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
         { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
         { Name: "The Inheritance", ReleaseYear: "1976"}];
        $("#movieTemplate").tmpl(movies).appendTo("#movieList");
    </script>
</body>
</html>

 1. 定义一个template ， 如上代码中 id="movieTemplate" 所示

 2. 使用数据 movies 借由模板生成最终的html 然后

 3. 将html附加到元素movieList内

代码简洁优雅， 不需要拼字符串，样式和逻辑分割的比较彻底

posted on 2011-07-06 21:15  听说读写  阅读(1276)  评论(0)  编辑  收藏  举报

导航