Never-ending Pumpkin Mulch

    tpl2js

    0.1.6 • Public • Published

    将html模板转化为javascript模块

    目的

    减轻前端拼接大量HTML以及维护时候的困难程度

    安装

    1. 安装node,参见:https://github.com/joyent/node

    2. 安装npm,参见:https://github.com/isaacs/npm

    3. 安装tpl

      • npm方式:

          $ npm install tpl2js -g
        
      • 源码方式:

          $ cd ~
          $ git clone git://github.com/caolvchong/tpl.git
          $ cd tpl
          $ vim ~/.bashrc
          添加 alias tpl=~/tpl/lib/tpl.bin.js,保存
        

    html模板语法

    变量

    HTML中的输出变量使用{{...}}

    语句:支持if语句,for语句,语句使用{{}}括起来

    • if语法:(else if 和 else 可选)

        {{if(...)}}
            ...
        {{else if(...)}}
            ...
        {{else}}
            ...
        {{endif}}
      
    • for语法:(key和item可选,默认key值为_key,item值为_item)

        {{for data=数据list key=索引 item=元}}
            ...
        {{endfor}}
      

    注释:HTML风格注释,可以支持多行

    <!-- 注释内容 -->
    

    使用

    命令帮助

    tpl 模板文件 [目标文件] [ --fn name] [ --charset charset]  
    
    • 模板文件必须存在
    • 目标文件如果没有输入,则在模板文件的同目录下生成同名,以tpl.js结尾的文件
    • --fn 指定输出为普通的function结构,把结果返回给name,不指定--fn默认将输出支持seajs的结构
    • --charset指定文件的编码,默认UTF-8,非UTF-8时候需要指定,防止乱码

    使用生成好的模板

    • seajs方式

        var tpl = require(生成好的模板文件);
        tpl.render(data); // json数据
      
    • 普通function方式: 例如使用: tpl hello.html --fn my.tpl.hello 生成模板hello.tpl.js
      引入该js后可以使用:(需要事先有my.tpl这个命名空间,可以自定义)

        my.tpl.hello.render(data); // json数据
      

    或者自己将其复制到任意的地方来使用

    详细的使用参看samples中的例子

    用作普通 Node 模块

    var Tpl = require('tpl2js'); 
    
    • 模板文件必须存在

    • 只接受两个参数:模板路径,编码(默认 UTF-8)

    • 使用方式

        var Tpl = require('tpl2js'); 
        var template = Tpl('./test.tpl', 'utf8');       
      
        var str = "";
        var data = {
          title: '关系(一)',
          name: '张三',
          sex: 1,
          friendList: [{
            name: '李四',
            sex: 2
          }, {
            name: '王五'
          }, {
            name: '赵六',
            sex: 1
          }]
        };
        template.compile(function(err, obj) {
          if(err) {
            console.log(err);
          }else {
            str = obj.render(data);         //render 得到渲染后的值
            console.log(str);
          }
        })
      

    详细的使用参看samples中的例子

    Install

    npm i tpl2js

    DownloadsWeekly Downloads

    19

    Version

    0.1.6

    License

    none

    Last publish

    Collaborators

    • caolvchong