Fatal编程技术网
  • javascript/
  • Javascript 在Node/Express中使用Pug模板引擎进行动态模板渲染

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

javascript node.js templates

Javascript 在Node/Express中使用Pug模板引擎进行动态模板渲染,javascript,node.js,templates,pug,mustache,Javascript,Node.js,Templates,Pug,Mustache,我正在Node.js中开发一个聊天应用程序，我使用的是帕格模板引擎，当我试图呈现一个可重用的模板时，我被卡住了，这是我用Mustache模板引擎实现的 下面是我想用帕格实现的一个例子，这个例子中使用了胡子 //index.js socket.on('newMessage', message => { let template = jQuery('#message-template').html(); let html = Mustache.render(template, {

我正在Node.js中开发一个聊天应用程序，我使用的是帕格模板引擎，当我试图呈现一个可重用的模板时，我被卡住了，这是我用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)
});
输出结果的my 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>


发送
发送位置
{{text}}
无论表单中的用户输入是如何动态显示的，我的问题是，如何使用Pug模板引擎实现这一点，因为我希望在整个项目中维护模板引擎

感谢您可以使用，您可能希望以自动方式执行编译步骤（
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）

函数fancyTemplateFun（本地）{
var buf=[]；
var pug_mixins={}；
var pug_interp；
var locals_for_with=（locals | |{}）；
（功能（作者）{
buf.push（“这是一个哈巴狗模板”
+（pug.escape（（pug_interp=author）=null？“”：pug_interp））
+ "");
}.用本地语言称（作者）为？
locals\u for_with.author:typeof author！=“未定义”？
作者：未定义）
);
返回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>


这是一个奇特的模板。
var html=window.fancyTemplateFun（{作者：“enlore”}）；
var div=document.createElement（“div”）；
div.innerHTML=html；
文件.正文.附件（div）；

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