如何使用underscore.js作为模板引擎？

我试图了解JavaScript的新用法作为服务器端语言和功能语言。 几天前我听说过node.js和表达框架。 然后我将underscore.js看作一组实用函数。 我在stackoverflow上看到了这个问题。 它说我们可以使用underscore.js作为模板引擎。 任何人都知道关于如何使用underscore.js进行模板化的好教程，特别是对于那些对高级javascript没有经验的biginners。 谢谢

---

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

<% %> - 执行一些代码

<%= %> - 在模板中打印一些值

<%- %> - 打印HTML转义的一些值

这就是它。

简单的例子：

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

那么tpl({foo: "blahblah"})将被呈现给字符串<h1>Some text: blahblah</h1>

---

<!-- 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列表按第一个字母分组（复杂示例w /图像，函数调用，子模板）fork它！ 尽情狂欢...

下面是@tarun_telang指出的XSS黑客JsFiddle演示

JsFiddle执行子模板的一种非标准方法

---

以最简单的形式，您可以使用它：

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

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

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

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

链接地址: http://www.djcxy.com/p/72063.html

上一篇: How to use underscore.js as a template engine?

下一篇: js measuring the difference between visible height and total height of div