tmodjs模板语法
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模板,然后就能进行循环了.
下载附件:
“tmodjs模板语法” 的相关文章
阻止表单提交刷新页面
<form action="save.php" method="post" target="nm_iframe"> &nbs...
Javascript绑定事件和移除事件
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...
ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...
javascript原型基础知识
//我们创建每个函数默认都有一个prototype(原型)属性,这个属性是一个对象 //1.我是普通的构造方法,我的属性叫实例属性,我的方法叫实例方法 /* function Box(name,age){ this.name=name; this.age=age; this.run...
js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>录制</title> <script ...
微信禁用右上角的分享按钮,以及隐藏分享的子按钮等菜单项
和腾讯合作的项目活动中腾讯要求我们必须隐藏朋友圈分享功能，一直以为没有官方Api,百般查找才在文档中找到，可能是自己不太细心。微信官方文档在jsjdk的"界面操作"中有详细说明:关闭当前网页窗口接口wx.closeWindow();批量隐藏功能按钮接口wx.hideMenuIte...