jQuery Template 简单使用

简介:

插件 github 地址 https://github.com/KanbanSolutions/jquery-tmpl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < script  type = "text/javascript"  src = "../../js/jquery-1.11.2.min.js" ></ script >
     < script  type = "text/javascript"  src = "../../js/jquery.tmpl.js" ></ script >
     < script  type = "text/javascript" >
         $(function(){
             var data = {username:"xiao",foods:[{name:"apple"},{name:"bear"}]};
             $("script[name=template]").tmpl(data).appendTo("div[name=content]");
         });
     </ script >
 
     < script  name = "template"  type = "text/x-jquery-tmpl" >
 
         username:{%= username%}< br />
         {%if foods.length == 0 %}
             There is no foods.
         {%else%}
             There are {%= foods.length%} kinds of foods.< br />
             favourite foods are below.< br />
             {%each(i,food) foods%}
                 < div >{%= food.name%}</ div >
             {%/each%}
         {%/if%}
 
 
 
     </ script >
 
</ head >
< body >
     < div  name = "content" ></ div >
</ body >
</ html >


Note : 最好将模板信息放在script标签里边,不然{%if%}表达式如果有>或<可能会有问题。



 本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/1639903

相关文章
|
JavaScript
Vue:简单使用像引用jQuery一样引用Vue
Vue:简单使用像引用jQuery一样引用Vue
65 0
Vue:简单使用像引用jQuery一样引用Vue
|
JavaScript
Vue:简单使用像引用jQuery一样引用Vue
Vue:简单使用像引用jQuery一样引用Vue
Vue:简单使用像引用jQuery一样引用Vue
|
JavaScript
Vue:简单使用像引用jQuery一样引用Vue
Vue:简单使用像引用jQuery一样引用Vue
62 0
|
JavaScript
Vue:简单使用像引用jQuery一样引用Vue
Vue:简单使用像引用jQuery一样引用Vue
121 0
Vue:简单使用像引用jQuery一样引用Vue
|
Web App开发 JavaScript 前端开发
|
JavaScript
jquery.tmpl.js使用外部 jQuery Template文件
$.get('/js/templates/filename.html', function(template) { $.tmpl(template, data).appendTo('#whatever'); }); filename.
1425 0
|
Web App开发 JavaScript 数据库
asp.net 中 Json、Jquery、Post简单使用
前台取得数据: //数据库中有 typeid 和 typename 字段 var json;$(document).ready(function () { //ready-start$.
1921 0