6.14 template

6.14.1 语法

_.template(templateString, [settings])

6.14.2 说明

将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。

6.14.3 代码示例

示例一：基本用法

var compiled = _.template('hello: <%= name %>'); //返回的是一个函数
compiled({name: 'moe'}); //这个函数里传入数据
//=> "hello: moe"

示例二：使用循环

<script type="text/html" id="template">
<ul>
<% _.each(list, function(v, i, l){ %>
    <li><%=v.name%></li>
<% }) %>
</ul>
</script>

var template = document.getElementById('template').text;
var data = {
    list: [{
        name: 'moe'
    }, {
        name: 'dato'
    }]
};
console.log(_.template(template)(data));

// =>
// <ul>
//     <li>moe</li>
//     <li>dato</li>
// </ul>

示例三：使用三元表达式

<script type="text/html" id="template">
<ul>
<% _.each(list, function(v, i, l){ %>
    <li><%=v.name%> - <%= v.isPass ? '已通过' : '未通过' %></li>
<% }) %>
</ul>
</script>

var template = document.getElementById('template').text;
var data = {
    list: [{
        name: 'moe',
        isPass : true 
    }, {
        name: 'dato'
    }]
};

console.log(_.template(template)(data));
//=>
// <ul>
//     <li>moe - 已通过</li>
//     <li>dato - 未通过</li>
// </ul>

示例四：使用if else

<script type="text/html" id="template">
<ul>
<% _.each(list, function(v, i, l){ %>
    <% if (v.isPass) { %>
        <li><%=v.name%></li>
    <% } %>  
<% }) %>
</ul>
</script>

var template = document.getElementById('template').innerHTML;
var data = {
    list: [{
        name: 'moe',
        isPass : true 
    }, {
        name: 'dato'
    }]
};
console.log(_.template(template)(data));

//=>
// <ul>
//     <li>moe</li>
// </ul>

示例五：调用方法

可以将值调用一个方法，进行转换

<script type="text/html" id="template">
<% _.each(numbers, function(n){ %>
     <li><%= Math.abs(n) %></li>
<% }); %>
</script>

var template = document.getElementById('template').text
var data = {numbers : [-1, -2, 3]};

console.log(_.template(template)(data));
//=>
// <li>1</li>
// <li>2</li>
// <li>3</li>

示例六：escape转换html

var template = '<%- html %>';
_.template(template)({html : 'more >'}); //=> "more &gt;"

6.14.4 print的妙用

var compiled = _.template('Hello ' + '<%= epithet %>');
compiled({epithet: "stooge"}); //=> "Hello stooge"

//使用print后
var compiled2 = _.template("<% print('Hello ' + epithet); %>");
compiled2({epithet: "stooge"}); //=> "Hello stooge"

6.14.5 换掉尖括号

//强制覆盖
_.templateSettings.interpolate = /\{\{(.+?)\}\}/g

var template = _.template("Hello {{ name }}!");
template({
    name: "Mustache"
});
//=> "Hello Mustache!"

6.14.6 换掉尖括号,传settings

var settings = {
    interpolate : /\{\{(.+?)\}\}/g
};
var template = _.template("Hello {{ name }}!", settings);
template({
    name: "Mustache"
});
//=> "Hello Mustache!"

6.14.7 _.templateSettings

_.templateSettings = {

    //evaluate标签中间的表示为可执行的js代码
    evaluate: /<%([\s\S]+?)%>/g,

    //interpolate表示输出一个js运行结果的值
    interpolate: /<%=([\s\S]+?)%>/g,

    //escapte表示输出这个变量的值并进行html标签过滤，如将相关的字符"<"转化为"&lt;"
    escape: /<%-([\s\S]+?)%>/g
};