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

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

jQuery - jTemplates

.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;

}

$(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);

}

});

});

标题

{#template MAIN}

Id

标题

发布时间

{#foreach $T.Lists as r}

{#include ROW root=$T.r}

{#/for}

{#/template MAIN}

{#template ROW}

{$T.Id}{$T.Title}{$T.CreateDate}

{#/template ROW}

这个是一个例子