Question

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

以下是我希望用Pug实现的示例，在此示例中使用了Mustache

if users.exists():
    for user in users:
         if not user.profile.provider == sociallogin.account.provider:
             etc...
             break

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

//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)
});

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

由于

Answer 1

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

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

首先，我们的模板文件。

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>

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

1 个答案: