tpl2js

NodeJS module to convert HTML template to javascript module

#将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中的例子