模板引擎简单使用

最新推荐文章于 2022-05-05 18:12:17 发布

Kim丶

最新推荐文章于 2022-05-05 18:12:17 发布

阅读量194

点赞数

分类专栏： web 文章标签：模板引擎模板引擎使用

本文链接：https://blog.csdn.net/u010689561/article/details/82934590

版权

web 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

模板引擎一般用作处理响应数据渲染，为了使用户界面与业务数据（内容）分离而产生的。
推荐一些模板引擎：

artTemplate：https://aui.github.io/art-template/
juicer：https://www.bootcdn.cn/juicer/
doT：https://github.com/olado/doT
handlebars：http://handlebarsjs.com/
jsRender：https://www.jsviews.com/#jsrender

使用

模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML中。
详情模板引擎语法去官网查看手册，上面例举一些模板引擎。

选择一个模板引擎，下载到本地，把js文件添加到项目中
先引入jQuery.js文件（写jQuery语句必须）
在页面中利用script引入模板引擎
创建一个script标签，帮后台数据与模板引擎绑定
再创建一个script标签，设置type属性，编写html语句，已经利用模板引擎语句编写，把想要的数据添加上去。
把这个script展示在页面上。

举例jsRender使用：
了解：

script标签如果type不等于text/javascript的话，内部内容不会作为JavaScript执行。
一般使用模板引擎，把script标签的type设为text/x-模板引擎名。

<html>
<head>
	<title>jsRender模板引擎使用</title>
</head>
<body>
<table>
	<thead>
		<tr>
			<th width="40"><input type="checkbox"></th>
			<th>作者</th>
			<th>评论</th>
			<th>评论在</th>
			<th>提交于</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
</body>
</html>
<!-- 第二步 -->
<script src="jquery.js"></script>
<!-- 第三步 -->
<script src="jsrender.min.js"></script>
<!-- 第五步 -->
<script id="comments_tmpl" type="text/x-jsrender">
// 循环数据集
	{{for comments}}
	// status,author,content,post_title,created是数据名字
	// tr标签中还使用了模板引擎if语句，判断status不同的值采用不同的class样式
	<tr {{if status == 'held'}} class="warning" {{else status =='rejected'}} class="danger" {{else}}{{/if}} data-id="{{:id}}">
        <td><input type="checkbox"></td>
        <td>{{:author}}</td>
        <td>{{:content}}</td>
        <td>{{:post_title}}</td>
        <td>{{:created}}</td>
        <td>{{if status == 'held'}} 待审 {{else status =='rejected'}} 拒绝 {{else}} 同意 {{/if}}</td>
    </tr>
    {{/for}}
</script>
<!-- 第四步 -->
<script>
	// 这里我是使用ajax请求后台php，返回JSON数据
	$.getJSON('comments.php', {}, function (res) {
		// 为模板引擎绑定数据render()方法
		var html = $('#comments_tmpl').render({
		// comments是对应上一个script标签的for循环循环的对象（名字自己随意起），res是返回的JSON数据（这里不必大多关注）
			comments: res
		});
	// 在页面添加展示数据
	// 第六步
	$('tbody').html(html)；
	});
});
</script>