`
Josh_Persistence
  • 浏览: 1632329 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

jQuery模板 ：(二) JSRender之内置的模板标签

jqueryjsrenderjsviewbuilt-in-tages内置标签 
阅读更多

前言：

Jquery UI团队在决定废弃原有的模板解决方案tmpl后（http://josh-persistence.iteye.com/admin/blogs/1914231），Query Template插件的驱动力--Boris Moore--与jQuery UI团队一起，继续开发新的jQuery模板。在2011年10月，Moore发表了一篇博客(http://www.borismoore.com/ 2011/10/jquery-templates-and-jsviews-roadmap.html)，更新了新插件工作进度的信息。在该博客中，他声明最终的解决方案将包含两个部分：

 

    （一）  JsRender模板，被称为"下一代jQuery模板"，为高性能的、纯粹基于字符串的呈现做了优化，并且不依赖于DOM或jQuery。

 

     （二） JsViews模板，它是"交互性的数据驱动视图，构建于JsRender模板之上"。

 

一、什么是JsRender？

JsRender是一个简单、直观，强大、易扩展、轻量的最优UI模板。

换句话说，就是在Html文件中使用java script来输出html模板的内容。

 

二、附件是最新的jsrender.js和jsrender.min.js（2013/07/27），如果想下载最新的jsrender.js和jsrender.min.js,可以去官方文档下载：http://www.jsviews.com/#download

 

二、玩转JsRender

内置的模板标签（Built-in template tags）

 

1. {{: ...}}：用于输出"..."部分指定的数据，“...”部分是数据来源的路径或者是一个数据表达式，例如：{{:address.street}}

 

例子：

 

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

<p><em><h2>1: Output Tag {{:...}}</h2></em></p>
<div id="result"></div>
<div id="result2"></div>

<script id="theTmpl" type="text/x-jsrender">
	<p> {{:name}} </p>

	<p>
		{{:name}}: lives in <b>{{:address.city}}</b>.<br />

		Here is <em>~root.address.city</em>: <b>{{:~root.address.city}}</b><br />

		Here is <em>~#data.address.city</em>: <b>{{:#data.address.city}}</b>
	</p>

</script>


<script id="theTmpl2" type="text/x-jsrender">
	<b>{{:#index+1}}:</b>
	{{:name}}: lives in <b>{{:address.city}}</b>.<br />

</script>

<script>

var data1 = {
	"name": "Josh",
   	"address": {
       "city": "Shanghai"
   	}	
}

var data2 = [
	{
    	"name": "Josh",
    	"address": {
        "city": "Shanghai"
    	}
  },
  {
    	"name": "Wangsheng",
    	"address": {
        "city": "BiJie"
    }
  }
];

var htmlOutput = $("#theTmpl").render(data1);
$("#result").html(htmlOutput);

var template = $.templates("#theTmpl2");
var htmlOutput2 = template.render(data2);

$("#result2").html(htmlOutput2);

</script>




</body>
</html>

 其中：在jsRender中，#xxx 表示当前view的 xxx 属性， - 所以 #index 就是view.index

 

{{:#index+1}}

 

 

运行的结果：




 

 2. {{>...}} 用于输出encoded的html。

 

 

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

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

<script id="theTmpl" type="text/x-jsrender">
{{:description}}<br/>
{{>description}}
</script>

<script>
	var data = {
	  "description": "A <b>very nice</b> appartment"
	};
	
	var template = $.templates("#theTmpl");
	
	var htmlOutput = template.render(data);
	
	$("#result").html(htmlOutput);
</script>

</body>
</html>

 输出结果：

 

 

A very nice appartment
A <b>very nice</b> appartment

 

3. {{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。

 

 

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

<script id="peopleTemplate" type="text/x-jsrender">
  <div>
    {{:name}} lives in {{include tmpl="#addressTemplate"/}}
  </div>
</script>

<script id="addressTemplate" type="text/x-jsrender">
    <b>{{>address.city}}</b>
</script>

<div id="peopleList"></div>

<script>
	var people = [
	  {
	    "name": "Pete",
	    "address": {
	      "city": "Seattle"
	    }
	  },
	  {
	    "name": "Heidi",
	    "address": {
	      "city": "Sidney"
	    }
	  }
	];
	
	var html = $("#peopleTemplate").render(people);
	
	$("#peopleList").html(html);
</script>

</body>
</html>

 

输出结果：

Josh lives in Shanghai
WangSheng lives in GuiYang

 

4. {{for ...}}遍历数组和对象

    1) {{for ...}}遍历对象：

 

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

<script id="peopleTemplate" type="text/x-jsrender">
  <div>
    {{:name}} lives in {{include tmpl="#addressTemplate"/}}
  </div>
</script>

<script id="addressTemplate" type="text/x-jsrender">
    <b>{{>address.city}}</b>
</script>

<div id="peopleList"></div>

<script>
var people = [
 {
   "name": "Josh",
   "address": {
     "city": "Shanghai"
   }
 },
 {
   "name": "WangSheng",
   "address": {
     "city": "GuiYang"
   }
 }
];
var html = $("#peopleTemplate").render(people);
$("#peopleList").html(html);
</script>

</body>
</html>

 

 

 

输出结果：

Josh lives in Shanghai
WangSheng lives in GuiYang

2) {{for...}} 遍历数组

 

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

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

<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
  {{for members}}
      <li>{{:name}} lives in <b>{{:address.city}}</b></li>
  {{/for}}
</ul>
</script>

<script>
var data = {
  "title": "The People:",
  "members": [
    {
      "name": "JoshWang",
      "address": {
        "city": "ShangHai"
      }
    },
    {
      "name": "WangSheng",
      "address": {
        "city": "GuiYang"
      }
    }
  ]
};

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

</body>
</html>

 

 

3）在{{for...}}与{{for...}}之间使用{{else...}}

 

 

<!DOCTYPE html>


<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

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

<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
{{for members}}
  <div>{{:name}}</div>
{{else}}
  <div>No members!</div>
{{/for}}

</script>

<script>
var data = {
  "title": "The A team",
  "members": []
};

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

</body>
</html>

 输出结果：

 

The A team

No members!
5.{{if ...}}用于渲染数据表达式为true时的模板. 一般用于如下几种情况：
1) {{if pathOrExpr}}...{{/if}} 用于渲染满足条件的内容。
2) {{if pathOrExpr tmpl=nameOrExpr /}}用于渲染外部包含的模板。

 3) {{if ...}}...{{else}}...{{/if}}

      {{if pathOrExpr}...{{else}}...{{/if}}

      {{if pathOrExpr1 tmpl=nameOrExpr1 }}{{else tmpl=nameOrExpr2 }}{{/if}}

 

 4) {{if ....}}...{{else ...}}...{{else}}...{{/if}}

     {{if pathOrExpr1}}...{{else pathOrExpr2}}...{{else}}...{{/if}

 

 

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsrender/jsrender.js"></script>
</head>
<body>

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

<script id="theTmpl" type="text/x-jsrender">
<h4>{{:title}}</h4>
{{if members && members.length}}
  <ul>
    {{for members}}
      <li>{{:name}}</li>
    {{/for}}
  </ul>
{{else standby && standby.length}}
  Standby only:
  <ul>
    {{for standby}}
      <li>{{:name}}</li>
    {{/for}}
  </ul>
{{else}}
  No members!
{{/if}}
</script>

<script>
var data = [
  {
    "title": "The A team",
    "members": [
      {
        "name": "JoshWang"
      },
      {
        "name": "Micheal Shi"
      }
    ],
    "standby": [
      {
        "name": "Xavier"
      }
    ]
  },
  {
    "title": "The B team",
    "members": [],
    "standby": [
      {
        "name": "Dunk"
      },
      {
        "name": "Adriana"
      }
    ]
  },
  {
    "title": "The C team",
    "standby": []
  }
];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

</body>
</html>

 

输出结果：

The A team

  • JoshWang
  • Micheal Shi

The B team

Standby only:

  • Dunk
  • Adriana

The C team

No members!

 

6. 前面提到的{{else ...}}, {{else ...}}标签可以用于{{if}}，{{for}}或者是自定义标签。

1）{{else}}用于{{if}}

{{if expression}}
    render this if the expression is true
{{else}}
    render this if the expression is false
{{/if}}

2）{{else}}用于{{for}}

{{for members}}
    Member Name: {{:name}}
{{else}}
    There are currently no members...
{{/for}}

3）{{else}}用于自定义标签：

{{tabs tabCaption="First Tab"}}
    first tab content
{{else tabCaption="Second Tab"}}
    second tab content
{{/tabs}}

 

7. 注释标签：{{!-- ... --}}

注：JsRender的注释标签和HTML的注释标签是相对的。你可以在JsRender的代码块中包含如下的代码：

<!-- This is an HTML comment -->

但是这个标签不会被JsRender或者是JsViews忽略掉，会包含在渲染的输出中。

 

 

 

  • 大小: 7 KB
2
顶
0
踩
分享到：
| jQuery模板 ：(一) 被纳入Jquery 插件， ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics