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 的任意位置

<div id="slot-user"></div>
<script id="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);

来源：CSDN

作者：sawyes

链接：https://blog.csdn.net/q116975174/article/details/104358513

标签

分隔符