template usage in underscore.js-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

template usage in underscore.js

高洛峰

Nov 04, 2016 pm 05:08 PM

最近看了下 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>

Copy after login

具体关于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>"

Copy after login

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

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

Copy after login

如果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!"

Copy after login

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

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

Copy after login

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

Copy after login

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

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

Copy after login

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

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

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7513

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Mar 15, 2025 am 09:19 AM

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles