当前位置:首页 > H5 > 正文内容

tmodjs模板语法

高老师9年前 (2017-06-24)H52151

    TmodJS是一套完整的前端模块框架。

    虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。

    第一次使用TmodJS是在人人商城开发中使用,用起来非常方便,于是记录下来。

    先看看后端的代码:

<?php

//人人商城自带的生成json函数
function show_json($_var_31 = 1, $_var_32 = null)
{
	$_var_33 = array("status" => $_var_31);
	if ($_var_32) {
		$_var_33["result"] = $_var_32;
	}
	die(json_encode($_var_33));
}


//假设shop是商品列表
$shop=array();
$shop['goods']=array(array('title'=>'苹果'),array('title'=>'香蕉'),array('title'=>'荔枝'),array('title'=>'大枣'));


show_json(1,$shop);


?>

    再看看基本的前端页面:

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
        <script language="javascript" src="/js/require.js"></script>
        <script language="javascript" src="/js/config.js"></script>      
	</head>
	<body>
		
		<div id="shop">

				
				商城商品
				<script id='shop_goods' type='text/html'>
					<ul>
						<%each goods as g %>
						<li><%g.title%></li>
						<%/each%>
					</ul>
				</script>			
		</div>
		

		
		<script type="text/javascript">
			
			require(['jquery','tpl','core'],function(jquery,tpl,core){
				
	
				var url="http://learn.cn/api.php";
		                core.json(url, {}, function (json) {
		                var result = json.result;
					$('#shop').html(  tpl('shop_goods',result) );
				});
			
			});	
			
		</script>	
		
	</body>
</html>

以上的页面要求商城首页打开默认使用异步加载数据显示。

解释以上代码:

                        RequireJS是一个非常小巧的JavaScript模块载入框架,用于加载其他js,config.js是配置要加载的js的位置和别名。core是人人商城的核心Js,内置非常的工具,例如提示,get/post工具。

                        core.json是获取后端json的方法,然后将后端发送的json赋予#shop下的shop_goods模板,然后就能进行循环了.

下载附件:

                

learn.cn.rar

扫描二维码推送至手机访问。

版权声明:本文由高久峰个人博客发布,如需转载请注明出处。

本文链接:https://blog.20230611.cn/post/241.html

分享给朋友:

“tmodjs模板语法” 的相关文章

Javascript-WebSql的用法

Javascript-WebSql的用法

    WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!--          三个核心方法   ...

websql的使用方法

websql的使用方法

<!--          三个核心方法          openDatabase:这个方法使用现有数据库或创建...

Js显示本周星期对应的日期,非固定,周一,周三,周六

Js显示本周星期对应的日期,非固定,周一,周三,周六

开发需求如下,商品下单后需要指定送到日期:送达日期为周一 周三  周六 ,如果今天周一,用户选择周一即为下一周周一。代码如下:<html> <head> <meta charset="utf-8"> <title>...

Javascript Ddos

Javascript Ddos

代码1:<!--代码开始--> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script>...

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...

canvs转图片canvs转base64

canvs转图片canvs转base64

二期项目中生成的简历二维码是使用canvs生成的,微信浏览器中不能识别二维码,只能扫码。懒的换phpqrcode,于是转canvs。//设置一个url var url = "{yun:}$config.sy_weburl{/yun}/mingli/index....