tpl.js的使用

tpl.js简介

tpl.js是用于和require.js相结合的html模板,和template.js的用法非常相似，我们可以从以下几点来学习它，我们先来看一下小案例中的目录结构：

1.如何写模板

每一个tpl模板都要放在后缀名为tpl的文件里面

//first.tpl
<% var love=false %>
<% if(love!=true){ %>
    <p>你的爱是假的 <%=blue%></p>
<% } else {%>
    <p>你的爱是真的 <%=blue%></p>
<%} %>

上面代码中的blue变量是在require first.tpl时传入的参数。

2.如何引用模板

因为tpl.js是结合require.js来编写的，所以这里就用require()来引入就好了，引入时传入的参数就是模板文件相对于引入require.js的文件的路径，注意了，在路径的前面一定要加tpl!，代码如下：

require({
  paths: {
    tpl: "lib/tpl"
  }
}, ["tpl!./modules/first/first.tpl"], function(text) {
  document.body.innerHTML += text({ blue: "我成功了" });
});

和单独使用require.js不同，这里的main.js中设置路径的时候是不用require.config的，必须用require。另外，代码中的text代表的是引入这个模板的模板函数，你可以起任意函数名，而且这个模板函数必须被调用才能成功引用模板，first.tpl中的blue的值就是在模板函数中传入的。

tpl.js的下载地址

链接: https://github.com/JulienCabanes/requirejs-tpl.
小案例的下载地址：https://github.com/lyjhzl/requirejs-tpl.