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

Question

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

4

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

下面是一个使用Mustache的示例，展示我希望在Pug中实现的功能：

//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模板引擎实现这一点，因为我希望在整个项目中保持一致的模板引擎。

谢谢。

- Eazy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- luisenrike · Accepted Answer

您可以使用pug.compileFileClient，您可能希望以自动化的方式（gulp，grunt等）执行编译步骤。

Compile a Pug template file to a string of JavaScript that can be used client side along with the Pug runtime.

First, our template file.

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

Then, we compile the Pug file into a function string.

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

Here’s what the output function string looks like (written to 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("");
}

Be sure to send the Pug runtime (node_modules/pug/runtime.js) to the client in addition to the template that you just compiled.

<!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>