Nodejs 使用jade时，遇到包含underscore模板的情况下如何解决

Nodejs 使用jade时，遇到包含underscore模板的情况下如何解决

div#todoapp
div
h1 Todo
input(id=‘new-todo’, type=‘text’, placeholder=‘接下来要做什么?’)
div#main
input(id=‘toggle-all’, type=‘checkbox’)
span.help-inline 标记所有事项 [双击修改]
ul#todo-list.unstyled
div#footer
//- 模板
script(type=‘text/template’, id=‘item-template’).
<div class=“view”>
<input class=“toggle” type=“checkbox” <%= done ? ‘checked=“checked”’ : ‘’ %> />
<%= title %>
<a class=“destroy”></a>
</div>
<input class=“edit” type=“text” value="<%= title %>" />


5 回复

Node.js 使用 Jade 时遇到包含 Underscore 模板的情况如何解决

在使用 Node.js 和 Jade（现在称为 Pug）模板引擎时，你可能会遇到需要嵌入 Underscore 模板的情况。由于两者都使用类似的语法，这可能导致冲突或混淆。本文将介绍如何在 Jade 模板中正确使用 Underscore 模板。

示例代码

假设我们有一个 HTML 结构，其中包含一个 Underscore 模板：

div#todoapp
  div
    h1 Todo
    input#new-todo(type='text', placeholder='接下来要做什么?')
  div#main
    input#toggle-all(type='checkbox')
    span.help-inline 标记所有事项 [双击修改]
    ul#todo-list.unstyled
  div#footer
    // Underscore 模板
    script(type='text/template', id='item-template').
      <div class="view">
        <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
        <%= title %>
        <a class="destroy"></a>
      </div>
      <input class="edit" type="text" value="<%= title %>" />

解决方法

  1. 转义字符：确保 Underscore 模板中的 <% 和 %> 不被 Jade 解释为条件语句。可以通过在 <% 前添加反斜杠 \ 来转义它们。

  2. 使用过滤器：Jade 支持自定义过滤器，我们可以创建一个过滤器来处理这些模板字符串。

示例代码 - 使用过滤器

首先，在 Jade 文件的顶部声明一个过滤器：

//- 定义过滤器
script(type='text/template', id='item-template').
  | <div class="view">
  |   <input class="toggle" type="checkbox" \ <%= done ? 'checked="checked"' : '' %> />
  |   <%= title %>
  |   <a class="destroy"></a>
  | </div>
  | <input class="edit" type="text" value="\ <%= title %>" />

或者，更优雅的方式是使用过滤器：

//- 定义过滤器
mixin underscore-template(str)
  = str.replace(/<%/g, '\\<%').replace(/%>/g, '%\\>')

script(type='text/template', id='item-template').
  mixin underscore-template(`
    <div class="view">
      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <%= title %>
      <a class="destroy"></a>
    </div>
    <input class="edit" type="text" value="<%= title %>" />
  `)

解释

  • 转义字符：通过在 <% 前添加反斜杠 \，可以防止 Jade 将其解释为条件语句。
  • 过滤器：通过定义一个过滤器，可以动态地转义模板字符串，使 Underscore 能够正确解析模板。

通过上述方法，你可以避免 Jade 和 Underscore 模板之间的冲突，并正确地嵌入 Underscore 模板。


这个好像就答案了?

报错了
Invalid indentation, you can use tabs or spaces but not both

嗯 多谢 实在没想到缩进的问题也会导致错误

在使用Jade（现称为Pug）时，如果你需要嵌入Underscore模板语法，可以先将Underscore模板转义为字符串，然后再插入到Jade模板中。这样可以避免Jade试图解析Underscore模板中的特殊字符。

示例代码如下：

doctype html
html
  head
    title Todo List
  body
    div#todoapp
      div
        h1 Todo
        input#new-todo(type='text', placeholder='接下来要做什么?')
      div#main
        input#toggle-all(type='checkbox')
        span.help-inline 标记所有事项 [双击修改]
        ul#todo-list.unstyled
      div#footer
        // 模板
        script(type='text/javascript')
          | var itemTemplate = '<%- _.template(\'' +
          |   "<div class='view'>" +
          |     "<input class='toggle' type='checkbox' <%= done ? 'checked=\"checked\"' : '' %> />" +
          |     "<%= title %>" +
          |     "<a class='destroy'></a>" +
          |   "</div>" +
          |   "<input class='edit' type='text' value='<%= title %>' />" +
          | '\').source %>';

在这段代码中，我们使用<%-来输出未转义的内容，并且使用\来转义模板中的特殊字符。这确保了Underscore模板能够在Jade模板中正确显示。

这样处理后，你可以直接在JavaScript代码中使用itemTemplate变量来渲染你的Underscore模板。

回到顶部