0.1.6 • Published 10 years ago

tpl2js v0.1.6

Weekly downloads
63
License
-
Repository
github
Last release
10 years ago

#将html模板转化为javascript模块

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

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

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

  2. 安装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中的例子

0.1.6

10 years ago

0.1.5

11 years ago

0.1.4

11 years ago

0.1.3

11 years ago

0.1.2

12 years ago

0.1.1

12 years ago

0.1.0

13 years ago

0.0.9

13 years ago

0.0.8

13 years ago

0.0.7

13 years ago

0.0.6

13 years ago

0.0.5

13 years ago

0.0.4

13 years ago

0.0.3

13 years ago

0.0.2

13 years ago