javascript - 使用Node/Express中的Pug模板引擎进行动态模板渲染

我正在使用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 Template Engine实现此目的，因为我想在整个项目中维护一个Template Engine。

谢谢

最佳答案

您可以使用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);

  这是输出函数字符串的样子（写成
  templates.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>

关于javascript - 使用Node/Express中的Pug模板引擎进行动态模板渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48244718/