handlebar.js

最新推荐文章于 2024-03-09 15:34:34 发布
最新推荐文章于 2024-03-09 15:34:34 发布
阅读量193 收藏
点赞数
分类专栏： js ajxa 文章标签： js ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/star77266989/article/details/84723052
版权
ajxa 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!doctype html>
<html class="no-js">
<%@ taglib prefix="s" uri="/struts-tags" %> 
<head>
  <title>滴哒洗车</title>

<%@ include file="/PUBLISH/common/wapmeta.jsp"%>
<link rel="stylesheet" href="<%=path %>/PUBLISH/amazeui/css/amazeui.switch.css"/>
<link rel="stylesheet" href="<%=path %>/PUBLISH/amazeui/css/iscroll.css"/>

<script src="<%=path %>/PUBLISH/amazeui/js/iscroll.js"></script>
<script src="<%=path %>/PUBLISH/common/iscroll.js"></script>
<script src="<%=path %>/PUBLISH/amazeui/js/amazeui.switch.min.js"></script>
  <body>
  	<style>
	 .order{background:#FFF;font-size:2.0rem; color:#666; padding:0.8rem; border-bottom:1px solid #dbdbdb; margin-bottom:1rem;}
	 .order .time{}
	 .order .state{ color:#aeaeae; text-align:right; margin-bottom:1rem;}
	 .order .txtbox{ font-size:1.6rem; padding-bottom:0;}
	  .order .txtbox span{ color:#c94141; margin-right:0.5rem;}
	  
	  .order:active {background:#ededed;}
	  
	  
	  .am-tab-panel{ padding:0 !important;}
	  .am-active a{ background-color:#f5f5f5!important;  border-bottom:4px solid #f19321!important;}
	  
	 </style> 
	<script type="text/x-handlebars-template" id="amz-header">
  		{{>header header}}
	</script>
	<div id="myHeader"></div>
	<div class="am-tabs" id="doc-my-tabs">
	  <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
	    <li class="am-active"><a href="" id="option1" style="font-size:1.6rem; padding:1rem;color:#333">已派单</a></li>
	    <li><a href="" id="option2" style="font-size:1.6rem; padding:1rem; color:#333">已完成</a></li>
	  </ul>
	  <div class="am-tabs-bd">
	  	
		<div class="am-tab-panel am-active" id="scrollDiv1">
	    <div id="orderBox1">
	    </div>
	    <img id="noorderimg1" src="<%=path %>/PUBLISH/amazeui/i/noorder.png" width="50%" style="margin-left:25%; margin-top:25%;display: none" />
	    </div>
		<div class="am-tab-panel" id="scrollDiv2">
	    <div id="orderBox2">
	    </div>
	    <img id="noorderimg2" src="<%=path %>/PUBLISH/amazeui/i/noorder.png" width="50%" style="margin-left:25%; margin-top:25%;display: none" />
	    </div>
	  </div>
	</div>
	
	<script id="order-template1" type="text/x-handlebars-template">
{{#order}}
<div id="{{id}}" class="order" οnclick="select(this.id)">

    <div class="am-g">
      <div class="am-u-sm-11">
		<div class="txtbox"> 顾客 : {{username}}</div>
        <div class="txtbox"> 车牌号 : {{carNum}}</div>
		<div class="txtbox"> 电      话: {{tel}}</div>
		<div class="txtbox"> 下单时间: {{createTime}}</div>
		<div class="txtbox"> 金额: <span style="color:red">￥{{cost}} </span></div>
      </div>
    </div>

 </div>
  
{{/order}}
 	</script>
 	<script id="order-template2" type="text/x-handlebars-template">
{{#order}}
<div id="{{id}}" class="order" οnclick="select(this.id)">

    <div class="am-g">
      <div class="am-u-sm-11">
        <div class="txtbox"> 顾客 : {{username}}</div>
        <div class="txtbox"> 车牌号 : {{carNum}}</div>
		<div class="txtbox"> 电      话: {{tel}}</div>
		<div class="txtbox"> 下单时间: {{createTime}}</div>
		<div class="txtbox"> 金额: <span style="color:red">￥{{cost}} </span></div>
      </div>
    </div>

 </div>
  
{{/order}}
 	</script>
  
  	<script >
  	
  		var rows = 20;
  		var page1 = 1;
  		var page2 = 1;
  		var template1;
  		var template2;
  		var endFinish1 = false;
  		var endFinish2 = false;
  		
  		var text;
  		
  		$("#doc-my-tabs").tabs();
	  	$(function() {
	  		template1 = Handlebars.compile($("#order-template1").html());
	  		template2 = Handlebars.compile($("#order-template2").html());
	  		// 加载header
	  		loadHeader();
	  		getData1();
	  		getData2();
	  	});
	  	var loadHeader = function() {
	  		var value={
	  				leftLink:"javascript:history.back();",
	  				leftIcon:"chevron-left",
	  				title:"订单列表",
	  				div:"myHeader"
	  		};
	  		header(value);
	  	};
	  	
	  	function getData1(){
	  		myLoading("正在加载...");
	  		$.ajax({
	  			type : "POST",
	  			dataType : "json",
	  			url : path + "/workerorder/getList.do",
	  			data : {rows : rows , page : page1 , orderStatus : "3"},
	  			success : function(json) {
	  				if(json.success){
	  					if(page1 == 1){
	  						text = $("#option1").text();
	  						$("#option1").text(text + "(" + json.sum + ")");
	  					}
	  					if(json.count == 0 && page1 == 1){
	  						$("#noorderimg1").css("display","block");
	  					}
	  					else{
	  						$("#noorderimg1").css("display","none");
	  					}
	  					$("#orderBox1").append(template1(json.data));
	  					
	  					$(window).scroll(function(){
	  						
	  						if($(document).scrollTop() + document.body.clientHeight == $(document).height()){
	  							if (!endFinish1) {
	  								getData1();
	  							}
	  						}
	  					});
	  					if(json.count < rows){
	  						endFinish1 = true;
	  					}
	  					if(json.count > 0){
	  						page1 = page1 + 1;
	  					}
	  				}
	  				myLoadingClose();
	  			}
	  		});
	  	}
	  	function getData2(){
	  		myLoading("正在加载...");
	  		$.ajax({
	  			type : "POST",
	  			dataType : "json",
	  			url : path + "/workerorder/getList.do",
	  			data : {rows : rows , page : page2 , orderStatus : "5"},
	  			success : function(json) {
	  				if(json.success){
	  					if(page2 == 1){
	  						text = $("#option2").text();
	  						$("#option2").text(text + "(" + json.sum + ")");
	  					}
	  					if(json.count == 0 && page2 == 1){
	  						$("#noorderimg2").css("display","block");
	  					}
	  					else{
	  						$("#noorderimg2").css("display","none");
	  					}
	  					$("#orderBox2").append(template2(json.data));
	  					
	  					$(window).scroll(function(){
	  						
	  						if($(document).scrollTop() + document.body.clientHeight == $(document).height()){
	  							if (!endFinish2) {
	  								getData2();
	  							}
	  						}
	  					});
	  					if(json.count < rows){
	  						endFinish2 = true;
	  					}
	  					if(json.count > 0){
	  						page2 = page2 + 1;
	  					}
	  				}
	  				myLoadingClose();
	  			}
	  		});
	  	}
	  	
	  	function select(id){
	  		window.location.href = path + "/workerorder/getDetail.do?id="+id;
	  	}
  	</script>
  </body>
</html>

 

star77266989
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
handlebar.js-experiment:前端模板引擎的实验-handlebar.js
05-25
handlebar.js-实验前端模板引擎的实验-handlebar.js供应商： jQuery，handlebar.js，Bootstrap和LESS注意 ： 由于跨域AJAX请求，此实验存储库仅在服务器上有效
Handlebars—semantic template engine
weixin_33827590的博客
05-26 262
概述 刚接触前端的时候，师傅就给我推荐了Handlebars，自己也蛮喜欢它的语法。到现在，Handlebars都已经更新到3.0.3了，是时候重新过一遍文档了。 引入 要使用Handlebars，首先你得download，然后再页面引入，就像这样 <script src="script/lib/jquery.js">...
handlebar.js模板引擎（轻页面小工程可用）
weixin_34198762的博客
11-14 301
介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版。Handlebars兼容Mustache语法，在大多数情况下它可以读取Mustache的语法并在你当前模板中使用。具体点击这里 安装 下载 npm install --save handlebars bower install --save handlebars ...
Handlebars.js: 简单高效的模板引擎
最新发布
gitblog_00001的博客
03-09 500
Handlebars.js: 简单高效的模板引擎 handlebars.jsMinimal templating on steroids.项目地址:https://gitcode.com/gh_mirrors/ha/handlebars.js Handlebars.js 是一个简单易用的 JavaScript 模板引擎，它可以帮助开发者快速生成 HTML 和其他文本格式的内容。 Handleba...
JavaScript页面模版引擎handlebars.js学习及使用
奋斗的蜗牛
09-30 7152
Handlebars.js是一个Javascript客户端的模板引擎（它也能用于服务器端）。它是一个Javascript库，就像你在页面中包含其他.js文件一样。有了它，在你的HTML页面内添加模板，模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。 它是怎样运行的：Handlebars.js是一个由Javascript构建的编译器，它接收任意HTML与Handleb
handlebar,js简单使用
晨曦的博客
07-23 531
很久之前使用handlebar,js来开发webapp,现在在当时忘记写下来,想起来还是挺有趣的. handlebar.js一种模板引擎.当时因为不太熟悉vue,也不知道脑子是怎么想的.就在网上找到handlebar.js,大大简化了代码. 在这里主要讲下其原理, 构建模板---->编译模板----->查找需要插入的dom节点--------->进行替换 代码如下 <!DOCTYPE html> <html> <head> &lt
HandleBar.js基本使用
06-19
然后在JavaScript文件中引入HandleBar.js库： ```javascript var Handlebars = require('handlebars'); ``` 3. **模板创建** 在HandleBar.js中，模板通常是一个HTML字符串，其中包含占位符（{{}}）。例如： `...
Util.js:javascript常用工具函数集合
04-27
Util.js javascript常用工具函数集合 具体的函数参数可在源码中看 依赖 Jquery，Handlebar Examples formatDate 格式化日期 var date = new Date(); Util.formatDate(date,'YYYY/MM/DD hh:mm:ss'); // 2014/11/12 ...
StoryBook：使用的技术：MongoDB，Node.js，Handlebar，Express
02-10
**Node.js** 是一个开放源代码、跨平台的JavaScript运行环境，用于在服务器端执行JavaScript代码。在StoryBook中，Node.js可能作为后端服务，提供API接口，处理数据请求，或者用于构建和打包前端资源。Node.js的事件...
handlebars.js_Handlebars.js入门指南
cune1359的博客
07-05 1539
在本文中，我们将研究Handlebars ，这是一个基于MustacheJavaScript模板引擎。 它与Moustache具有相同的功能，但具有许多新功能。 Handlebars是一个实用的模板工具，特别是用于以JSON形式显示数据序列，而JSON是今天在Web应用程序API中使用的一种常见数据格式形式。 看看这篇介绍性文章 ，它很好地解释了JSON。 在本文中，我们将带您了解Hand...
Handlebars.js 中文文档
hsany330的专栏
06-29 1241
使用Handlebars，你可以轻松创建语义化模板，Mustache模板和Handlebars是兼容的，所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能。 开始 Handlebars模板看起来和HTML一样，只是嵌入了 handlebars 表达式 class="entry"> {{title}} class
handlebar.js使用
weixin_30788239的博客
05-06 165
官方网站：http://handlebarsjs.com/ 下载及查看使用帮助，或者用百度cdn引用 一、定义模板 <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h2>{{title}}</h2&...
Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jque...
06-07 1367
Handlebars的基本用法 使用Handlebars，你可以轻松创建语义化模板，Mustache模板和Handlebars是兼容的，所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能。 开始 Handlebars模板看起来和HTML一样，只是嵌入了 handlebars 表达式 <divclass="ent...
02-如何引入HandleBar.js
高调做事，低调做人！
02-06 397
1 2
handlebar.js模板使用方法简记
high_height的博客
03-20 531
之前在项目中用到的一个模板引擎，用起来挺简单的，也还不错1.引入模板&lt;script src="../js/handlebars.js"&gt;&lt;/script&gt;&lt;div class="this-site"&gt;&lt;/div&gt;2.生成模板&lt;script type="text/template" id="list_tpl&quot
10分钟快速学Handlebars
whqet
01-29 7726
据说handlebars是一个流行的模板引擎，可以把html从javascript中分离出来，写更清晰的代码。来不妨一试。
init handlebar
05-13
Handlebars.js是一个JavaScript模板引擎，可以将数据和模板合并生成HTML字符串。如果要使用Handlebars.js，需要先引入它的库文件，如下所示： ```html <script src="https://cdn.jsdelivr.net/npm/handlebars/dist/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值