| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>SeaJS - 调用模板演示</title>
- <!-- 公用模板引擎 -->
- <script src="./mix-cmd/build/template.js"></script>
- <script src="../js/sea.js"></script>
- </head>
- <body>
- <div id="doc">loading..</div>
- <div id="doc2"></div>
- <!-- 使用传统方式 -->
- <script id="test-inner" type="text/html">
- {{if isAdmin}}
- <h3>{{title}}</h3>
- <ul>
- {{each list}}
- <li>{{$index + 1}}: {{$value}}</li>
- {{/each}}
- </ul>
- {{/if}}
- </script>
- <script>
- // 渲染页面中的模板
- var data = {
- title: '动态编译',
- isAdmin: true,
- list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
- };
- var html = template.render('test-inner', data);
- document.getElementById('doc2').innerHTML = html;
- </script>
- <script>
- // 使用预编译的方式渲染模板
- var data = {
- title: '预编译',
- time: (new Date).toString(),
- list: [
- {
- title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
- url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
- },
- {
- title: '明起汽油价格每吨下调310元 单价回归7元时代',
- url: 'http://finance.qq.com/a/20130326/007060.htm'
- },
- {
- title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
- url: 'http://news.qq.com/a/20130326/001254.htm'
- },
- {
- title: '湖南27岁副县长回应质疑：父亲已不是领导',
- url: 'http://news.qq.com/a/20130326/000959.htm'
- },
- {
- title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
- url: 'http://news.qq.com/a/20130326/001307.htm'
- }
- ]
- };
- // 加载index模板
- seajs.use('./mix-cmd/build/index', function (index) {
- document.getElementById('doc').innerHTML = index(data);
- });
- </script>
- </body>
- </html>
|
