我举了一个非常简单的例子

1)

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

结果会是

Welcome you are at mysite.This has been created by john whose age is 25.

2)这是一个模板

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

这是html

<div>
  <ul id="list_2"></ul>
</div>

这是javascript代码，其中包含json对象和把模板到html

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

你需要知道的关于下划线模板的一切都在这里。只需要记住3件事:

<% %> -执行一些代码 <%= %> -打印模板中的某些值 <%- %> -打印HTML转义的一些值

就是这样。

简单的例子:

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

那么tpl({foo: "blahblah"})将被渲染为字符串<h1>一些文本:blahblah</h1>

我举了一个非常简单的例子

1)

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

结果会是

Welcome you are at mysite.This has been created by john whose age is 25.

2)这是一个模板

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

这是html

<div>
  <ul id="list_2"></ul>
</div>

这是javascript代码，其中包含json对象和把模板到html

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

该文档用于模板的部分，我看了源代码。

_。模板函数有3个参数:

String text:模板字符串 对象数据:评价数据 对象设置:本地设置，_。templateSettings是全局设置对象

如果没有给定数据(或null)，则返回一个渲染函数。它有1个参数:

对象数据:同上

在设置中有3个正则表达式模式和1个静态参数:

RegExp: "<%code%>"在模板字符串中 RegExp插值:"<%=code%>"在模板字符串中 RegExp转义:"<%-code%>" 字符串变量:可选，模板字符串中数据参数的名称

求值节中的代码将被简单地求值。你可以使用__p+="mystring"命令将此部分的字符串添加到被评估的模板中，但不建议这样做(不是模板接口的一部分)，使用interpolate部分代替。这种类型的section用于向模板中添加if或for之类的块。

插值段中代码的结果将被添加到已计算的模板中。如果返回null，则添加空字符串。

转义节在给定代码的返回值上使用_.escape转义html。因此，它类似于插值节中的_.escape(代码)，但它在将代码传递给_.escape之前使用像\n这样的空白字符进行转义。我不知道为什么这很重要，它在代码中，但它与interpolate和_.escape(它也不转义空白字符)一起工作得很好。

默认情况下，data参数由with(data){…}语句，但是这种求值比用命名变量求值要慢得多。所以用变量参数命名数据是件好事……

例如:

var html = _.template(
    "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" +
        "as the  \"<%= _.escape(o.text) %>\" and the same<br />" +
        "as the \"<%- o.text %>\"</pre>",
    {
        text: "<b>some text</b> and \n it's a line break"
    },
    {
        variable: "o"
    }
);

$("body").html(html);

结果

The "<b>some text</b> and 
 it's a line break" is the same
as the "<b>some text</b> and 
 it's a line break" and the same
as the "<b>some text</b> and 
 it's a line break"

你可以在这里找到更多的例子，如何使用模板和覆盖默认设置: http://underscorejs.org/#template

通过模板加载，你有很多选择，但最后你总是要把模板转换成字符串。你可以像上面的例子一样给它一个普通的字符串，或者你可以从一个脚本标签加载它，并使用jquery的.html()函数，或者你可以用require.js的tpl插件从一个单独的文件加载它。

另一种选择是使用简洁而不是模板来构建dom树。

最简单的形式是这样的:

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });
//html is now '<li>John Smith</li>'   

如果你要多次使用一个模板，你会想要编译它，这样它会更快:

var template = _.template('<li><%= name %></li>');

var html = [];
for (var key in names) {
    html += template({ name: names[i] });
}

console.log(html.join('')); //Outputs a string of <li> items

我个人更喜欢Mustache风格的语法。您可以调整模板标记标记使用双花括号:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

var template = _.template('<li>{{ name }}</li>');

<!-- Install jQuery and underscore -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%
        // repeat items 
        _.each(items,function(item,key,list){
          // create variables
          var f = item.name.split("").shift().toLowerCase();
      %>
        <tr>
          <!-- use variables -->
          <td><%= key %></td>
          <td class="<%= f %>">
            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
            <h3><%- item.name %></h3>
            <p><%- item.interests %></p>
          </td>
        </tr>
      <%
        });
      %>
    </tbody>
  </table>
</script>

<!-- Create your target -->

<div id="target"></div>

<!-- Write some code to fetch the data and apply template -->

<script type="text/javascript">
  var items = [
    {name:"Alexander", interests:"creating large empires"},
    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
    {name:"..."},
    {name:"Yolando", interests:"working out"},
    {name:"Zachary", interests:"picking flowers for Angela"}
  ];
  var template = $("#usageList").html();
  $("#target").html(_.template(template,{items:items}));
</script>

谢谢@ phhearst ! JsFiddle(最新) JsFiddle列表分组的第一个字母(复杂的例子w/图像，函数调用，子模板)分叉!玩得开心点…… @tarun_telang注意到XSS黑客的JsFiddle演示 一种做子模板的非标准方法