jquery jtemplates.js模板渲染引擎的详细用法第三篇

<span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html>

<html lang="zh-CN">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jQuery - jTemplates</title>

    <!-- <link rel="stylesheet" type="text/css" href="./css/style.css"> -->

    <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>

    <script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>

    <style type="text/css">

    .container{

        width: 1000px;

        height: 600px;

        margin: 0 auto;

    }

    .template{

        display: none;

    }

    table{

        background-color: #fff;

    }

    table tr th{

        padding: 8px;

        border-bottom: 1px solid #eee;

    }

    table tr td{

        padding: 10px;

        border-bottom: 1px solid #eee;

    }

    </style>

    <script type="text/javascript">

    $(function(){

        // 初始化JSON数据

        // 通过getJSON方法加载

        // $.getJSON("./data/dataSource1.json", function(data){

        //     // 设置模板

        //     $("#result").setTemplateElement("template");

        //     // 给模板加载数据

        //     $("#result").processTemplate(data);

        // });

        // 通过ajax方法加载

        $.ajax({

            type:"post",

            dataType:"json",

            url:"./data/dataSource1.json",

            success:function(data){

                // alert(data);

                // 设置模板

                $("#result").setTemplateElement("template");

                // 给模板加载数据

                $("#result").processTemplate(data);

            },

            error:function(error){

                alert("error:" + error.responseText);

            }

        });

    });

    </script>

</head>

<body>

    <div class="container">

        <div><h1>标题</h1></div>

        <div id="result"></div>

        <textarea id="template" class="template">

            {#template MAIN}

            <table>

                <tr>

                    <td>Id</td>

                    <td>标题</td>

                    <td>发布时间</td>

                </tr>

                {#foreach $T.Lists as r}

                {#include ROW root=$T.r}

                {#/for}

            </table>

            {#/template MAIN}

            {#template ROW}

            <tr>

                <td>{$T.Id}</td>

                <td>{$T.Title}</td>

                <td>{$T.CreateDate}</td>

            </tr>

            {#/template ROW}

        </textarea>

    </div>

</body>

</html></span>

　　这个是一个例子

jquery jtemplates.js模板渲染引擎的详细用法第三篇的更多相关文章

  1. jquery jtemplates.js模板渲染引擎的详细用法第二篇

    jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...

  2. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  3. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  4. jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...

  5. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  6. nunjucks.js模板渲染

    直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...

  7. Html模板渲染引擎Hogan

    Github:https://github.com/twitter/hogan.js 最简单的使用教程:http://www.imooc.com/article/18493

  8. AI (Adobe Illustrator)详细用法（三）

    本文主要是介绍和色彩相关的用法. 一.路径外观设置 1.设置描边粗细 手动输入20px 下拉选择 鼠标选中数值,按向上或向下的箭头调整 在右边的描边菜单中修改 Note:按住shift键,然后上下箭头 ...

  9. (4)Flask项目模板渲染初体验

    一.准备静态资源 将项目使用到的静态资源拷贝到static目录 二.创建前台首页html 创建templates/home/home.html页面,内容包含导航和底部版权两部分,中间内容区域为模板标签 ...

随机推荐

  1. POJ1185 炮兵阵地 —— 状压DP

    题目链接:http://poj.org/problem?id=1185 炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions ...

  2. centos6.3 安装python2.7.3

    现在比较流行python2.7版本,centos6.3的默认版本是2.6.6,所以需要安装下2.7版本 1.下载安装python2.7 #wget http://www.python.org/ftp/ ...

  3. 分享知识-快乐自己：SpringMvc整合遇到-前台传JSON参数，后台实体类对象接收

    前台数据转JSON对象: /** * * @param $myFrom:from表单 * @returns {{}} */ function from($myFrom) { var ebookEntr ...

  4. JQuery添加删除标签

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src= ...

  5. THUPC2019划水记

    虽然早就打不动了,虽然一个队友提前说好跑路了,还是两个人来玩了玩.最大的失误是没有开场打模拟题,然后就没骗到钱,还是要向某一心骗钱不顾排名的队伍学习.这次的模拟题超简单,很愉快地就打完了,也没调多久, ...

  6. codevs 1144 守望者的逃离

    传送门 1144 守望者的逃离 2007年NOIP全国联赛普及组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解   题目描述 Description 恶 ...

  7. 《c# 实现p2p文件分享与传输系统》 二、 设计

    c#实现P2P文件分享与传输系统 二.设计 在上一篇文章中,介绍了P2P网络的常用模型,并确定了EasyP2P系统的框架,本文将就此设计完成它的主要结构和运作流程. 1. 首先是Tracker Ser ...

  8. Day08:继承与派生，多态，封装，绑定与非绑定方法，面向对象高级（反射,__str__,__del__）

    上节课复习:1.编程思想    面向过程        核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么后干什么        基于该思想编写程序就好比在设计一条流水线,是一种机械式的思维 ...

  9. Django admin有用的自定义功能

    引用园友 无名小妖 的博客 https://www.cnblogs.com/wumingxiaoyao/p/6928297.html 写的很好,但是博客园不能转载,不过我已经点赞了~

  10. Docker入门（四）：服务（Services）

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...