使用模板引擎时，报template not found: Cannot read property ‘value‘ of null错误。

var sta = template('box', data)

第一个参数一定是script得id，不能是类

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><link rel="stylesheet" href="./assets/news.css" /><script src="./lib/jquery.js"></script><script src="./lib/template-web.js"></script></head><body><div id="news-list"></div><!-- 定义模板 --><script type="text/html" id="box">{{each data}}  <!-- 因为有9条信息因此需要用循环 --><!-- 为什么是对data循环 --><div class="news-item"><img class="thumb" src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="" /><div class="right-box"><h1 class="title">{{$value.title}}</h1><div class="tags">{{each $value.tags}}<span>{{$value}}</span>{{/each}}</div><div class="footer"><div><span>{{$value.source}}</span>&nbsp;&nbsp;<span>{{$value.time | dateFormat}}</span></div><span>评论数：{{$value.cmtcount}}</span></div></div></div>{{/each}}</script><script src="./js/06.js"></script></body></html>

window.onload = function() {$(function() {//定义补零函数,给时间function pad(n) {if (n < 10) {return '0' + n} else {return n}}template.defaults.imports.dateFormat = function(date) {var dt = new Date(date)var y = dt.getFullYear()var m = pad(dt.getMonth() + 1)var d = pad(dt.getDate())var h = pad(dt.getHours())var mm = pad(dt.getMinutes())var ss = pad(dt.getSeconds()) //'y-m-d h:mm:ss'return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + ss}function getlist() { //获取新闻列表的数据$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/news',success: function(res) {console.log(res);if (res.status != 200) {alert('获取数据失败')} else {//先对数据进行改造，将tags得字符串改成一个数组for (var i = 0; i < res.data.length; i++) {res.data[i].tags = res.data[i].tags.split(',')}var sta = template('box', res)$('#news-list').html(sta)// console.log(res.data); //服务器响应的数据// $.each(res.data, function(i, data) {//不是这样对9条数据进行循环得//         console.log(data); //定义数据//         //调用模板函数//         var sta = template('box', data) //调用模板//             //渲染html结构//         console.log(sta);//         // <!-- 将数据填充到box里面 -->//         $('#news-list').html(sta)//     })//怎么对数据进行循环渲染}}})}getlist()//定义模板//定义时间过滤器})
}

.news-item {display: flex;border: 1px solid #eee;width: 700px;padding: 10px;margin-bottom: 5px;
}.thumb {display: block;width: 230px;height: 140px;background-color: #ccc;margin-right: 10px;
}.right-box {display: flex;flex-direction: column;justify-content: space-between;font-size: 12px;flex: 1;
}.title {font-size: 20px;font-weight: normal;
}.tags span {display: block;float: left;background-color: #F0F0F0;line-height: 20px;padding: 0 10px;border-radius: 10px;margin-right: 8px;
}.footer {display: flex;justify-content: space-between;
}

模板引擎--新闻案例相关推荐

模板引擎应用案例- 学生档案管理
案例源码 1. 案例介绍 - 学生档案管理目标: 模板引擎应用, 强化node.js项目制作流程. 知识点: http请求响应.数据库.模板引擎.静态资源访问. 2. 制作流程建立项目文件夹并生成 ...
php模板引擎smarty案例下载,PHP – Smarty模板引擎 – Download下载 – 2.6.22 | 学步园...
PHP - Smarty模板引擎 - Download下载 - 2.6.22 [PHP - Smarty模板引擎 - 官方网站] [PHP - Smarty模板引擎 - 下载地址] http://sm ...
发布方配模板引擎V2.1及开发教程和案例
在项目开发中一般分为程序开发者与美工两种身份.可是通常这些使用者不是程序强就是美工强,如果要两者同时兼顾,那可得死掉不少脑细胞.所以模版引擎就应运而生啦!模版引擎的目的,就是要达到上述提到的逻辑分离的 ...
模板引擎art-template应用案例 ---- 学生档案管理
1. 案例介绍 - 学生档案管理目标:模板引擎应用,强化node.js 项目制作流程涉及知识点: http请求响应,数据库,模板引擎,静态资源访问 2. 制作流程建立项目文件夹并声称项目描述文件 ...
MyBatis Plus Generator 代码生成器 v3.5.x 案例，含校验、MapStruct、Swagger、QO、VO，自定义 FreeMarker 模板引擎
v3.5.3.v3.5.3.1 详情请点击 v3.5.1 代码生成器 import com.baomidou.mybatisplus.annotation.IdType; import com.bao ...
微金所案例总结——Bootstrap应用模板引擎的使用
文章目录自定义字体图标(@font-face) Vertical-align复习模板引擎动态添加轮播图需求分析 ui框架&模板引擎转JSON格式数据获取轮播图数据(ajax) 根据数 ...
在Apache案例中加入模板引擎
效果图 1.js文件 var http=require('http') var fs=require('fs') var template=require('art-template') var se ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

模板引擎--新闻案例

使用模板引擎时，报template not found: Cannot read property ‘value‘ of null错误。

模板引擎--新闻案例相关推荐

最新文章

热门文章