TModJS:使用tmodjs
ylbtech-Template-TModJS:使用tmodjs |
1.返回顶部 |
1、安装
npm install -g tmodjs
2、配置
我的模板都放在tpl文件夹中,htmls用于存放模板页面,每一个后缀名都是.html,而build用于存放编译后输出的模板js。
如果不设置type,默认会将所有的模板编译合并为 template.js ,而如果设置了type,就会单独生成对应js文件。
运行后htmls文件夹下会生成一个package.json文件。
3、模板语法
{{each Data as value index}}
<tr>
<td>{{value.ID}}</td>
<td>{{value.Client}}</td>
<td>{{value.ClientType | geterrtype}}</td>
<td>{{value.ErrCode}}</td>
<td>{{value.SqlString}}</td>
<td class="w70">{{value.CreateDate}</td>
<td>{{value.CreateTime}}</td>
</tr>
{{/each}}
{{content}}输出内容
{{#content}}不编码输出内容
if语句:
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
遍历:
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
或者
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
注:使用辅助方法时{{value.ClientType | geterrtype}}中 | 两边的空格不能省略。
4、使用模板
4.1 type为默认时:
var template = require('/tpl/build/template.js');
var html = template('dblog', data);
$('#J_SearchResults').html(html);
4.2 type为非默认时,拿seajs举例:
var render = require('/tpl/build/dblog');
var html = render(data);
$('#J_SearchResults').html(html);
5、使用辅助方法
package.json中有一个helpers配置项
{
"name": "template",
"version": "1.0.0",
"dependencies": {
"tmodjs": "1.0.1"
},
"tmodjs-config": {
"output": "../build",
"charset": "utf-8",
"syntax": "simple",
"helpers": null,
"escape": true,
"compress": true,
"type": "default",
"runtime": "template.js",
"combo": true,
"minify": true,
"cache": true
}
}
我们可以在模板目录新建一个 config/template-helper.js 文件,然后编辑 package.json 设置"helpers": "./config/template-helper.js"。
里面的代码类似:
template.helper("geterrtype", function(n) {
// return xxx;
}); template.helper("dataformat", function(n,format) {
// return xxx;
});
但是我在迁移模板的时候发现template-helper.js中不能获取外部的变量也不能引入外部的js,不然会报错。
但是如果辅助方法不是在这里设置,而是在普通的js中就可以用:
var template = require('/tpl/build/template.js');
template.helper("geterrtype", function(n) {
return common._getErrType(n);
});
var html = template('dblog', data);
$('#J_SearchResults').html(html);
下面这种也可以= =虽然感觉怪怪的:
var template=require('/tpl/build/template');
template.helper("geterrtype", function(n) {
return common._getErrType(n);
});
var render = require('/tpl/build/dblog');
var html = render(data);
$('#J_SearchResults').html(html);
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
TModJS:使用tmodjs的更多相关文章
- TModJS:README
ylbtech-TModJS:README 1.返回顶部 1. TmodJS 项目已经停止维护,请使用更好的代替方案:art-template-loader TmodJS(原名 atc)是一个简单易用 ...
- TModJS:目录
ylbtech-TModJS:目录 1.返回顶部 1. https://github.com/aui/tmodjs 2. https://www.npmjs.com/package/tmodjs 3. ...
- 杂项:TModJS
ylbtech-杂项:TModJS TmodJS(原名 atc)是一个简单易用的前端模板预编译工具.它通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力.它采用目录来组织维 ...
- 使用tmodjs
1.安装 npm install -g tmodjs 2.配置 我的模板都放在tpl文件夹中,htmls用于存放模板页面,每一个后缀名都是.html,而build用于存放编译后输出的模板js. 如果不 ...
- tmodjS
1. 在安装好nodejs之后(-g全局)安装tmodejs 成功安装后如下: 2. 进入你要cmd进行打包的地方,配置好pakage.json 原来的目录结构如下: 3. 通过cmd进入当前的pub ...
- TModJS:template
ylbtech-TModJS: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech. ...
- TmodJs:常用语法
ylbtech-TmodJs:常用语法 1.返回顶部 1.循环 {{each items as item index}} <tr> <td>{{index+1}}</td ...
- 我们是怎么管理QQ群的
文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
随机推荐
- Office 顿号怎么输
中文状态下回车上面一个按键就是
- Odoo multiprocessing
Odoo 在 非 windows 系统下, 支持 并行处理,开启 workers 配置项 即可. odoo有以下配置项 跟 并行处理有关 配置项 帮助信息 解说 limit_memor ...
- Android开发之实现锁屏功能
锁屏须要引入设备超级管理员.在文档Android开发文档的Administration中有具体的说明. Android设备管理系统功能和控制訪问. 主要有一下几个步骤: 1 创建广播接收者,实现De ...
- oracle insert/update
insert into table (,,) values (,,) where update table set (,)=(select , from ) where
- 用Q-learning算法实现自动走迷宫机器人
项目描述: 在该项目中,你将使用强化学习算法,实现一个自动走迷宫机器人. 如上图所示,智能机器人显示在右上角.在我们的迷宫中,有陷阱(红色炸弹)及终点(蓝色的目标点)两种情景.机器人要尽量避开陷阱.尽 ...
- ORACLE 查看表结构
select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户的表 select tabl ...
- NXP 公司的 RFID 卡
NXP 公司的 RFID 卡 NXP RFID MIFARE 产品概览   MIFARE 系列: Mifare Ultralight,简称 MF0. Mifare Classic,简称 MF1 M ...
- 《AndroidStudio有用指南》反馈问题和建议
<AndroidStudio有用指南>反馈问题和建议 IntelliJ IDEA在持续更新, Android Studio也在持续更新, 本书也将会持续更新. Android Studio ...
- 基于EasyDarwin云视频平台的幼儿园视频直播(手机直播/微信直播)解决方案
一.方案介绍 1.1.方案背景 在2016年10月25日至28日的安博会上,我们看到了不少的幼教平台厂商,我们注意到大部分的幼教平台,为了追求极佳的用户体验,在微信或者APP端能够做到极快的打开速度, ...
- android通过DialogFragment实现时间选择
在android开发中,时间控件是不可或缺的一部分,特别是在设置个人生日或按时间进行搜索时都要用到.Android有内置的DatePicker和timePicker,使用起来也是相当的方便,既可以在布 ...