_.template(创建预编译模板方法)
语法:
_.template([string=''], [options={}])
源代码链接:source
npm包链接:npm package
描述:
创建一个预编译模板方法,可以插入数据到模板中 "interpolate" 分隔符相应的位置。 HTML会在 "escape" 分隔符中转换为相应实体。 在 "evaluate" 分隔符中允许执行JavaScript代码。 在模板中可以自由访问变量。 如果设置了选项对象,则会优先覆盖_.templateSettings
的值。
注意:
在开发过程中,构建
_.template
可以使用sourceURLs, 便于调试。了解更多预编译模板的信息查看 lodash的自定义构建文档 。
了解更多 Chrome 沙箱扩展的信息查看Chrome的扩展文档 。
开始版本:0.1.0
参数:
[string=''] (string)
: 模板字符串.[options={}] (Object)
: 选项对象.[options.escape=_.templateSettings.escape] (RegExp)
: "escape" 分隔符.[options.evaluate=_.templateSettings.evaluate] (RegExp)
: "evaluate" 分隔符.[options.imports=_.templateSettings.imports] (Object)
: 导入对象到模板中作为自由变量。[options.interpolate=_.templateSettings.interpolate] (RegExp)
: "interpolate" 分隔符。[options.sourceURL='lodash.templateSources[n]'] (string)
: 模板编译的来源URL。[options.variable='obj'] (string)
: 数据对象的变量名。
返回值:
(Function)
: 返回编译模板函数。
例子:
// Use the "interpolate" delimiter to create a compiled template.
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'
// Use the HTML "escape" delimiter to escape data property values.
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b><script></b>'
// Use the "evaluate" delimiter to execute JavaScript and generate HTML.
var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'
// Use the internal `print` function in "evaluate" delimiters.
var compiled = _.template('<% print("hello " + user); %>!');
compiled({ 'user': 'barney' });
// => 'hello barney!'
// Use the ES template literal delimiter as an "interpolate" delimiter.
// Disable support by replacing the "interpolate" delimiter.
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'
// Use backslashes to treat delimiters as plain text.
var compiled = _.template('<%= "\\<%- value %\\>" %>');
compiled({ 'value': 'ignored' });
// => '<%- value %>'
// Use the `imports` option to import `jQuery` as `jq`.
var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';
var compiled = _.template(text, { 'imports': { 'jq': jQuery } });
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'
// Use the `sourceURL` option to specify a custom sourceURL for the template.
var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });
compiled(data);
// => Find the source of "greeting.jst" under the Sources tab or Resources panel of the web inspector.
// Use the `variable` option to ensure a with-statement isn't used in the compiled template.
var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });
compiled.source;
// => function(data) {
// var __t, __p = '';
// __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';
// return __p;
// }
// Use custom template delimiters.
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'
// Use the `source` property to inline compiled templates for meaningful
// line numbers in error messages and stack traces.
fs.writeFileSync(path.join(process.cwd(), 'jst.js'), '\
var JST = {\
"main": ' + _.template(mainText).source + '\
};\
');
Last updated
Was this helpful?