模板引擎简单使用_Kim丶的博客-程序员资料

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

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>

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

程序员离职后收到原公司 2400 元，被告违反竞业协议赔 18 万_唐普开发者程序员：cxyITgc的博客-程序员资料

程序员离职后收到原公司 2400 元，被告违反竞业协议赔 18 万！到底是怎么回事？

IOS开发之----异常处理_沸腾的泪水05314的博客-程序员资料

转载自：http://blog.sina.com.cn/s/blog_71715bf8010166qf.html开篇大话： Object-C语言的异常处理符号和C++、JAVA相似。再加上使用NSException，NSError或者自定义的类，你可以在你的应用程序里添加强大的错误处理机制。异常处理机制是由这个四个关键字支持的：@try，@catch，@thorw，@finally。当代码

node相关报错问题_gyp info using [email protected]_lily1346891的博客-程序员资料

问题一：node-sass npm ERR! command failed解决：1、删除 npm uninstall node-sass2、安装 npm install node-sass问题二：npm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using [email protected] ERR! gyp info using [email protected] | win32 | x64npm ERR! gyp ERR!

Android 连接USB默认选中MTP模式_Just_Paranoid的博客-程序员资料

Android 连接USB默认选中MTP模式需求分析Android系统默认连接USB会显示：正在通过USB为此设备充电，并且无法在电脑查看存储内容。需要实现的效果：Android 连接USB默认选中MTP模式，连接USB显示：正在通过USB传输文件，选择USB的使用方式的弹框下MTP模式为选中状态，并且可以在电脑端可以访问和写入存储空间。解决方案diff --git a/frameworks/base/services/usb/java/com/android/server/usb/UsbD

小机器人5岁了！细数Android甜点史_Ronys的博客-程序员资料

2012-11-05 作者：出处：互联网责编：联想Yoga分期付款月供279元五年前的11月5日，谷歌不仅宣布成立“开放手机联盟”（Open Handset Alliance），表示要帮助创建移动通信的开放标准，而且推出了Android平台——一个基于Linux的智能手机平台。以下是一篇简短的图文介绍，回顾了谷歌手机操作系统的发展。转

【C】函数指针_November's chopin的博客-程序员资料

案例环境代码#include <stdio.h>int max(int x, int y){ return x > y ? x : y;}int main(){ int (* p)(int ,int) = & max; int a, b, c, d; printf("请输入三个整数:\n"); scanf("%...