lodash模板技术

lodash常用笔记

基础使用

输出变量 <%= varriable %>

interpolate<%= varriable %>

// 使用 "interpolate" 分隔符创建编译模板var compiled= _.template('hello <%= user %>!');compiled({'user':'fred'});// => 'hello fred!'

使用 ES 分隔符代替默认的 “interpolate” 分隔符

// 使用 ES 分隔符代替默认的 "interpolate" 分隔符
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'

转义变量 <%- value %>

// 使用 HTML "escape" 转义数据的值var compiled= _.template('<b><%- value %></b>');compiled({'value':'<script>'});// => '<b>&lt;script&gt;</b>'

forEach <% %>

// 使用 "evaluate" 分隔符执行 JavaScript 和 生成HTML代码var compiled= _.template('<% _.forEach(users, function(user) { %>  <li><%- user %></li>  <% }); %>');compiled({'users':['fred','barney']});// => '<li>fred</li><li>barney</li>'

print

// 在 "evaluate" 分隔符中使用内部的 `print` 函数
var compiled = _.template('<% print("hello " + user); %>!');
compiled({ 'user': 'barney' });
// => 'hello barney!'

使用自定义的模板分隔符

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'

script方式引入

html 的任意位置

<divid="slot-user"></div><scriptid="tpl-user"type="text/template">
hello,<%if(!_.isEmpty(user)){%><%- user.name%><%}%></script>

js 渲染视图

var user={
   name:"steven"};var slotHtml= _.template($('#tpl-user').html())({user: user});// var slotHtml = _.template($('#tpl-user').html(), {user: user});$('#slot-user').html(slotHtml);