在 Node/Express 中使用 Pug 模板引擎进行动态模板渲染答案

【问题标题】：Dynamic template rendering with Pug Template Engine in Node/Express在 Node/Express 中使用 Pug 模板引擎进行动态模板渲染
【发布时间】：2018-01-13 22:06:28
【问题描述】：

我正在使用 Node.js 开发一个聊天应用程序，我正在使用 Pug 模板引擎，当我尝试渲染可重用模板时遇到了困难，这是我使用 Mustache 模板引擎实现的。

下面是我想用 Pug 实现的示例，此示例中使用 Mustache

//index.js
  socket.on('newMessage', message => {
  let template = jQuery('#message-template').html();
  let html = Mustache.render(template, {
    text: message.text,
    from: message.from
  });

  jQuery('#messages').append(html)
});

输出结果的 index.html 文件片段

<div class="chat__main">
    <ol id="messages" class="chat__messages"></ol>

    <div class="chat__footer">
        <form action="" id="message-form">
            <input type="text" name="message" placeholder="Message" autofocus autocomplete="off">
            <button>Send</button>
        </form>
        <button id="send-location">Send location</button>
    </div>

    <script id="message-template" type="text/template">
        <p>{{text}}</p>
    </script>


</div>

<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/libs/jquery-3.2.1.min.js"></script>
<script src="javascripts/libs/moment.js"></script>
<script src="javascripts/libs/mustache.js"></script>
<script src="javascripts/index.js"></script>
</body>
</html>

无论表单中的用户输入是动态显示的，我的问题是，我如何使用 Pug 模板引擎来实现这一点，因为我想在我的项目中维护一个模板引擎。

谢谢

【问题讨论】：

标签： javascript node.js templates pug mustache

【解决方案1】：

您可以使用pug.compileFileClient，您可能希望以自动方式执行compile 步骤（gulp、grunt、...）

将 Pug 模板文件编译为可在客户端与 Pug 运行时一起使用的 JavaScript 字符串。

首先，我们的模板文件。

h1 This is a Pug template
h2 By #{author}

然后，我们将 Pug 文件编译成函数字符串。

var fs = require('fs');
var pug = require('pug');

// Compile the template to a function string
var jsFunctionString = pug.compileFileClient('/path/to/pugFile.pug', {name: "fancyTemplateFun"});

// Maybe you want to compile all of your templates to a templates.js file and serve it to the client
fs.writeFileSync("templates.js", jsFunctionString);

这是输出函数字符串的样子（写入模板.js)。

function fancyTemplateFun(locals) {
  var buf = [];
  var pug_mixins = {};
  var pug_interp;

  var locals_for_with = (locals || {});

  (function (author) {
    buf.push("<h1>This is a Pug template</h1><h2>By "
      + (pug.escape((pug_interp = author) == null ? '' : pug_interp))
      + "</h2>");
  }.call(this, "author" in locals_for_with ?
    locals_for_with.author : typeof author !== "undefined" ?
      author : undefined)
  );

  return buf.join("");
}

确保将 Pug 运行时 (node_modules/pug/runtime.js) 发送到除了刚刚编译的模板之外的客户端。

<!DOCTYPE html>
<html>
  <head>
    <script src="/runtime.js"></script>
    <script src="/templates.js"></script>
  </head>

  <body>
    <h1>This is one fancy template.</h1>

    <script type="text/javascript">
      var html = window.fancyTemplateFun({author: "enlore"});
      var div = document.createElement("div");
      div.innerHTML = html;
      document.body.appendChild(div);
    </script>
  </body>
</html>

【讨论】：