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

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

就是这样。

简单的例子:

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

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

最简单的形式是这样的:

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>');

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

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

就是这样。

简单的例子:

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

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

我想分享一个更重要的发现。

使用<%= variable =>会导致跨站脚本漏洞。所以使用<%- variable ->更安全。

我们必须将<%=替换为<%-以防止跨站点脚本攻击。不确定，这是否会对性能有影响

Lodash也是一样的 首先编写如下脚本:

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

现在编写一些简单的JS，如下所示:

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

popoup是你想要生成表格的div

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

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}));
  });