artTemplate子模板include

有多少人一直被官网,这坑坑的讲解所迷或

不废话,直接上demo

demo1:

		<script type="text/html" id="temp2">
			<div>
	    		<ul>
				{{each contents}}
				      <li>{{$value.content}}</li>
				{{/each}}
	            </ul>
	        </div>
		</script>

		<script type="text/html" id="temp1">
		{{each list}}
		    <div>
		    	<h2>{{$value.title}}</h2>
		    	{{include ‘temp2‘ $value.a}}
		    </div>
		{{/each}}
		</script>

		<script type="text/javascript">
			$(function(){

				  var data = {
				      list:[
					      {
					      		title:"这是一个测试标题1",
					      		a:{
					      			contents:[
							          	{"content":"这是一段内容1"},
							          	{"content":"这是一段内容1"},
							          	{"content":"这是一段内容1"}
						        	]
					      		}
					      },
					      {
					      		title:"这是一个测试标题2",
					      		a:{
					      			contents:[
						          		{"content":"这是一段内容2"},
						          		{"content":"这是一段内容2"},
						          		{"content":"这是一段内容2"}
						        	]
					      		}
					      }
				      ]
				  };

				  var html = template(‘temp1‘, data);
				  $("#main").html(html);

			});
		</script>

  

demo2:

<script type="text/html" id="temp2">
			<div>
	    		<ul>
				{{each}}
				      <li>{{$index+1}} / {{$value.image}}</li>
				{{/each}}
	            </ul>
	        </div>
		</script>

		<script type="text/html" id="temp1">
		{{each list}}
		    <div>
		    	<h2>{{$value.title}}</h2>
		    	{{include ‘temp2‘ $value.images}}
		    </div>
		{{/each}}
		</script>

		<script type="text/javascript">
			$(function(){
				  var data = {
				      list:[
					      {
					      		title:"这是一个测试标题1",
				      			contents:[
						          	{"content":"这是一段内容11"},
						          	{"content":"这是一段内容12"},
						          	{"content":"这是一段内容13"}
					        	],
					        	images:[
					        		{"image":"这是一张图片11"},
						          	{"image":"这是一张图片12"},
						          	{"image":"这是一张图片13"}
					        	]
					      },
					      {
					      		title:"这是一个测试标题2",
				      			contents:[
					          		{"content":"这是一段内容21"},
					          		{"content":"这是一段内容22"},
					          		{"content":"这是一段内容23"}
					        	],
					        	images:[
					        		{"image":"这是一张图片21"},
						          	{"image":"这是一张图片22"},
						          	{"image":"这是一张图片23"}
					        	]

					      }
				      ]
				  };
				  var html = template(‘temp1‘, data);
				  $("#main").html(html);
			});
		</script>

这是一个神奇的世界,需要神奇的人去发现新大陆!

  

时间: 2025-01-04 21:35:46

artTemplate子模板include的相关文章

ZendFramework-2.4 源代码 - 关于MVC - View层 - 在模板内渲染子模板

<?php // 方式一: // 1.在模板内直接编写如下内容即可 $viewModel = new ViewModel(); $viewModel->setTemplate('album/album/subtemplate'); // 使用模板,可以不用设置,会自动识别 $viewModel->setVariables($this->vars()); $viewModel->setVariable('var12subtpl', 'var12subtpl_value'); e

art-template引擎模板

art-template简介 artTemplate(后文简称aT)才是模板引擎,而TmodJS(后文简称TJ,曾用名atc)则是依赖于前者的一款模板预编译器.两者都是由腾讯开发.其实aT完全可以独立使用,而TJ存在的意义是提供了一个对模板进行预编译的环境(基于NodeJS和模块化).有了TJ,aT可以支持按目录的方式存储模板.以include的方式对指定目录中的模板进行调用(注意:这里的include和aT中的include不一样,后者只能引用同一页面中的不同模板标签).自动监控模板变化与自动

模板引擎artTemplate及模板预编译器TmodJS的使用入门

一.为什么要使用前端模板? 主要为了解决UI层与业务逻辑的纠缠不清.比如我们需要根据后端返回的数据动态生成一个表格或者类似表格的DOM(比如ul > li等)时,按照传统的方式,需要我们先获取数据,然后在页面的js中通过遍历数据.提取相关数值以及动态拼接html字串的方式,生成最终的DOM.这样就产生了UI与业务逻辑的纠缠.如果只是偶尔或者局部使用可能问题不明显,但如果代码量庞大.业务或数据十分复杂的情况下,这种方式产生的代码会十分不利于后期维护,这想必是每一个开发人员都不愿看到的.因此,便产生

前端模板引擎arttemplate,后端模板引擎Nvelocity

It's my first blog 大家好,我叫曾岑,朋友们都叫我包子,今年21岁,湖北人,刚大学毕业,学的.net开发.去年一年,在南京工作了一年,那时候还没有拿到毕业证,找工作也是蛮难的,别人说没毕业证,也没经验,工资只能给个基础工资,不过还好,和几个朋友一起结伴去的,一起租的房子住的.在南京的工作经历就不说那么多了,至少让我看到了编程的这个世界. 今年7月份,辞掉了南京的工作,来到了深圳这个城市,重新开始找工作,运气还算不错,第二天就面试上了,第三天就正式上班了,工资待遇对于我这种新手来

art-template web模板引擎引入JS函数

art-template语法 可以在模板引擎中加入自定义的函数; template.defaults.imports.LocalShortDate = LocalShortDate; 在模板引擎中的用法: {{rec.add_time|LocalShortDate}} 这样就可以在模板引擎中使用函数了 原文地址:https://www.cnblogs.com/hool/p/11527697.html

artTemplate模板引擎学习实战

在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javascript引擎.而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML. 如果有不了解的朋友,可以前往这两篇文章: 淘宝购物车页面 PC端和移动端实战 淘宝购物车页面 智能搜索框Ajax异步加载数据 源码地址: GitHub:Uncle-Keith 回

js模板引擎--artTemplate

js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上

artTemplate模板引擎

来源:http://blog.csdn.net/joyhen/article/details/21233525 编写模板 使用一个type="text/html"的script标签存放模板: <script id="test" type="text/html"> <h1><%=title%></h1> <ul> <%for(i = 0; i < list.length; i

性能卓越的js模板引擎--artTemplate

以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上,测试截图如下: 下面进入正题: 特性