underscore.js でのテンプレートの使用法-jsチュートリアル-php.cn

underscore.js でのテンプレートの使用法

高洛峰

リリース： 2016-11-04 17:08:02

オリジナル

1697 人が閲覧しました

最近看了下 underscore.js ，看到里面有个 template 的方法，小使了一下，感觉挺不错的，觉得能满足我日常工作的需求了，而且使用起来也简单容易，具体用法可以参考这里。还有， underscore.js 是个不错的东西呀，里面有很多很实用的方法，都可以顺手拿来使用，省了不少功夫呢。：）

<script type="text/template" id="tpl"><% _.each(datas, function (item) { %>	<div class="outer">
		<%= item.title %> - <%= item.url %> - <%= item.film %>
	</div><% }); %></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="http://documentcloud.github.com/underscore/underscore-min.js"></script><script type="text/javascript">var datas = [
	{
		title: &#39;标题1&#39;,
		url: &#39;http://www.baidu.com&#39;,
		film: &#39;电影名称1&#39;
	},
	{
		title: &#39;标题2&#39;,
		url: &#39;http://www.baidu.com&#39;,
		film: &#39;电影名称2&#39;
	},
	{
		title: &#39;标题3&#39;,
		url: &#39;http://www.baidu.com&#39;,
		film: &#39;电影名称3&#39;
	},
	{
		title: &#39;标题4&#39;,
		url: &#39;http://www.baidu.com&#39;,
		film: &#39;电影名称4&#39;
	},
	{
		title: &#39;标题5&#39;,
		url: &#39;http://www.baidu.com&#39;,
		film: &#39;电影名称5&#39;
	}
];

$(&#39;body&#39;).html( _.template($(&#39;#tpl&#39;).html(), datas) );</script>

ログイン後にコピー

具体关于underscore的模型引擎，官方介绍如下：

template_.template(templateString, [settings])
将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象。如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: &#39;moe&#39;});
=> "hello: moe"var template = _.template("<b><%- value %></b>");
template({value: &#39;<script>&#39;});
=> "<b><script></b>"

ログイン後にコピー

您也可以在JavaScript代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.

var compiled = _.template("<% print(&#39;Hello &#39; + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

ログイン後にコピー

如果ERB式的分隔符您不喜欢, 您可以改变Underscore的模板设置, 使用别的符号来嵌入代码.定义一个 interpolate 正则表达式来逐字匹配嵌入代码的语句, 如果想插入转义后的HTML代码则需要定义一个 escape 正则表达式来匹配,还有一个 evaluate 正则表达式来匹配您想要直接一次性执行程序而不需要任何返回值的语句.您可以定义或省略这三个的任意一个.例如, 要执行Mustache.js类型的模板:

_.templateSettings = {
      evaluate: /\{\{([\s\S]+?)\}\}/g,
      interpolate: /\{\{=([\s\S]+?)\}\}/g,     
       escape: /\{\{-([\s\S]+?)\}\}/g};
       var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

ログイン後にコピー

您也可以在JavaScript代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.

var compiled = _.template("<% print(&#39;Hello &#39; + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

ログイン後にコピー

_.templateSettings = {
      evaluate: /\{\{([\s\S]+?)\}\}/g,
      interpolate: /\{\{=([\s\S]+?)\}\}/g,      escape: /\{\{-([\s\S]+?)\}\}/g};var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

ログイン後にコピー

默认的, template 通过 with 语句来取得 data 所有的值. 当然, 您也可以在 variable 设置里指定一个变量名. 这样能显著提升模板的渲染速度.

_.template("Using &#39;with&#39;: <%= data.answer %>", {variable: &#39;data&#39;})({answer: &#39;no&#39;});
=> "Using &#39;with&#39;: no"

ログイン後にコピー

预编译模板对调试不可重现的错误很有帮助. 这是因为预编译的模板可以提供错误的代码行号和堆栈跟踪, 有些模板在客户端(浏览器)上是不能通过编译的在编译好的模板函数上, 有 source 属性可以提供简单的预编译功能.

<script>
  JST.project = <%= _.template(jstText).source %>;
  </script>

ログイン後にコピー