使用tmodjs

浏览数：33 / 时间：2015年06月09日

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);

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

使用tmodjs