JS模板laytpl

//第一步：编写模版。你可以使用一个script标签存放模板，如：

<script id="demo" type="text/html">

<h1>{{ d.title }}</h1>

<ul>

{{# for(var i = 0, len = d.list.length; i < len; i++){ }}

    <li>

        <span>姓名：{{ d.list[i].name }}</span>

        <span>城市：{{ d.list[i].city }}</span>

    </li>

{{# } }}

</ul>

</script>

//第二步：建立视图。用于呈现渲染结果。

<div id="view"></div>

//第三步：渲染模版

var data = {

    title: '前端攻城师',

    list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]

};

var gettpl = document.getElementById('demo').innerHTML;

laytpl(gettpl).render(data, function(html){

    document.getElementById('view').innerHTML = html;

});

文档说明

一、模版语法

输出一个普通字段，不转义html：   {{ d.field }}

输出一个普通字段，并转义html：   {{= d.field }}

JavaScript脚本： {{# JavaScript statement }}

二、内置方法

1)：laytpl(template);   //核心函数，返回一个对象

    

    var tpl = laytpl(template);

    tpl.render(data, callback);   //渲染方法，返回渲染结果，支持异步和同步两种模式

        a)：异步

        tpl.render(data, function(result){

            console.log(result);

        });

        

        b)：同步

        var result = tpl.render(data);

        console.log(result);

    

2)：laytpl.config(options); //初始化配置

    options是一个对象

    {open: '开始标签', close: '闭合标签'}

    

3)：laytpl.v    //获取版本号

注意事项

1.直接引入laytpl.js即可，另外还可直接使用Seajs等模块化加载。

2.无论商业或个人平台都可以任意使用laytpl

3.任何场合下都务必保留来源，请勿剔除laytpl.js头部注释。

官方网站：http://sentsin.com/layui/laytpl/

下载：http://www.bkjia.com/codes/207072.html

怎在express使用doT模板引擎

js的模板引擎实在太多了，幸好 JavaScript template language shootoff 这篇不断被更新的文章，帮我们用真实的测试结果，得到了目前最快的模板引擎doT安装dot$ sudo npm install dot 让express使用dot安装express的模板引擎约定，引擎必须有一个compile方法，接受str和options参数，返回一个function对象即可，接口大致如下：exports.compile = function(str, options) { // compile
template str // return function } 显然，只需要实现compile接口即可// dot.express.js var dot = require('dot'); exports.compile = function(str, options) { return dot.template(str); }; 在express使用dot.express.jsvar dot_express = require('dot.express'); app.set("view engine",
"html"); app.register(".html", dot_express); // render app.get('/', function(req, res, next) { res.render('index', {world: 'world'}); }); 更简约的方式var dot = require('dot'); app.set("view engine", "html"); app.register(".html", { compile: function(str) { return
dot.template(str); } }); 让你的html模板文件也通过智能提示校验dot默认的定界符是 {{ 和 }}，这样模板文件会如下// index.html hello {{! word }}这样，肯定不能通过HTML智能提示校验参考tenjin的做法，将定界符修改为能通过智能提示校验的即可 // index.js dot.templateSettings.begin='