laytpl--前端数据绑定

来源：互联网发布：霍华德站立摸高数据编辑：程序博客网时间：2024/06/05 06:37

模板引擎下载地址：

http://download.csdn.net/download/laixiao_hero/10126657

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <meta charset="utf-8" />  <script src="/laytpl/laytpl.js"></script>  <script>    //假设你得到了这么一段数据    var data = {      title: '前端圈',      intro: '一群码js的骚年，幻想改变世界，却被世界改变。',      list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }, { name: 'Dem', city: '北京' }]    };    window.onload = function () {      //建立视图。用于呈现渲染结果。      var gettpl = document.getElementById('testTpl').innerHTML;      laytpl(gettpl).render(data, function (html) {        //得到的模板渲染到html        document.getElementById('testDiv').innerHTML = html;      });    }  </script></head><body>  <script id="testTpl" type="text/html">    <h1>{{ d.title }}</h1>    <p>{{d.intro}}</p>    <ul>      {{# for(var i = 0; i < d.list.length; i++){ }}      <li>        <span>姓名：{{ d.list[i].name }}</span>        <span>城市：{{ d.list[i].city }}</span>      </li>      {{# } }}    </ul>  </script>  <div id="testDiv"></div></body></html>

阅读全文

0 0