如何使用下划线.js作为模板引擎？

javascript node.js underscore.js functional-programming template-engine

2022-08-30 00:20:42

我试图了解javascript作为服务器端语言和函数式语言的新用法。几天前，我听说了node.js和express框架。然后我看到下划线.js作为一组实用程序函数。我在stackoverflow上看到这个问题。它说我们可以使用下划线.js作为模板引擎。任何人都知道关于如何使用下划线.js模板的好教程，特别是对于高级javascript经验较少的大玩家。谢谢

答案 1

您需要了解的有关下划线模板的所有信息都在这里。只有3件事要记住：

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

仅此而已。

简单示例：

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

然后呈现为字符串tpl({foo: "blahblah"})<h1>Some text: blahblah</h1>

答案 2

<!-- 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>

JsFiddle谢谢@PHearst！
JsFiddle （最新）
JsFiddle按第一个字母分组的列表（带图像的复杂示例，函数调用，子模板）分叉它！尽情狂欢。。。
JsFiddle下面@tarun_telang指出的XSS黑客的演示
JsFiddle一种非标准方法做子模板