使用带有 Express 3.x 和 Jade 模板的 NodeJS 是否可以只为先前渲染的列表重新渲染一个项目？答案

【问题标题】：Using NodeJS with Express 3.x and Jade templates is it possible to just re-render one item for a previously rendered list?使用带有 Express 3.x 和 Jade 模板的 NodeJS 是否可以只为先前渲染的列表重新渲染一个项目？
【发布时间】：2014-03-28 17:34:57
【问题描述】：

我一直在寻找任何可以解释是否可以将一个“新”项目（附加）重新渲染到玉模板列表的帖子。

假设我们有一个日志条目列表，并且在第一次请求时，我们使用 res.render 和 Jades 的每个功能呈现从 MongoDB 集合“日志”中提取的列表。

由于我们喜欢从数据库中检索更新，我们还为该集合附加了一个 MongoWatch，用于侦听更改。更新后，我们可以执行一些附加到 Jade 模板中第一个列表的代码吗？

/* app.js */

/*
    Display server log 
*/
app.get ('/logs', function(req, res, next) {

  // Using Monk to retrieve data from mongo
  var collection = db.get('logs');

  collection.find({}, function(e,docs){

    // watch the collection
    watcher.watch('application.logs', function(event){
      // Code that update the logs list with the new single entry event.data?
    });

    // Request resources to render
    res.render('logs', { logs: docs } );    
  });

});

<!-- logs.jade -->
extends layout

  block content

    div
      each log in logs
        div.entry
          p.url= log.url

也许我应该以另一种方式使用模板引擎，我对 Express、Jade 还很陌生，非常感谢所有花时间回答此类问题的人..

// 问候

【问题讨论】：

您必须研究 WebSockets 或基于 Ajax 的替代方案，例如 Long Polling。 Socket.IO 是这些场景的通用 Node.js 框架。但是，HTTP 不允许服务器将数据推送到客户端，除非客户端有对服务器的开放请求。
感谢您的快速响应！我怕是这样，是我的一厢情愿！ Socket.IO 有一个 npm 模块，我会研究一下

标签： javascript node.js mongodb express pug

【解决方案1】：

好的，所以我查看了 Jonathan Lenowski 的建议，顺便感谢一下！我想出了一个解决问题的方法。以为我会跟进，也许会在此过程中帮助其他人..

基本上我现在按照建议使用socket.io

首先安装 socket.io npm 模块，将其添加到 package.json 并运行 npm install，我使用“最新”作为版本。接下来要在客户端使用“socket.io.js”，您实际上必须将文件从已安装的 socket.io 模块复制到您的 javascript 文件夹中。
```
Path (seen from project root is): 'node_modules/socket.io/node_modules/socket.io-client/dist/' 
```

在服务器端设置 DB、Watcher、Webserver、Socket 和控制器

/* 
   SETUP DATABASE HANDLE
   in app.js
*/
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:'+app.get('port')+'/application');

/* SETUP DATABASE UPDATE WATCH */
var watcher = new MongoWatch({ format: 'pretty', host: 'localhost', port: app.get('port') });

/* START WEBSERVER AND SETUP WEBSOCKET */
var server = Https.createServer({key: certData.serviceKey, cert: certData.certificate}, app);
var io = require('socket.io').listen(server);
server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

/*
    Display server log - controller
*/
app.get ('/logs', function(req, res, next) {

  // Using Monk to retrieve data from mongo
  var collection = db.get('logs');
  collection.find({}, function(e,docs){

    // watch the collection logs in database application
    watcher.watch('application.logs', function(event){
          io.sockets.emit('logs', { log: event.data });
    });

    // Request resources to render
    res.render('logs', { logs: docs } );    
  });
});

在布局中包含 socket.io javascript

/* 
   Add client side script
   in layout.jade 
*/ 
script(type='text/javascript' src='/javascripts/socket.io.js')

使用客户端

/* 
   SETUP DATABASE HANDLE
   in logs.jade
*/
extends layout

block content

  script.
    var socket = io.connect('https://localhost:4431');
    socket.on('logs', function (data) {
      console.log(data.log);
      // Here we use javascript to add a .log-entry to the list
      // This minor detail i leave to the developers own choice of tools
    });

  div.row#logs
    div.col-sm-12
      div.header-log Some application
      div.logs-section
        each log in logs
          div.log-entry.col-sm-12(data-hook=log.status)
            p.method= log.method
            p.url= log.url
            p.status(style='color: #'+log.color+' !important')= log.status
            p.response-time= log.time
            p.content-length= log.length
            p.datetime= log.date

使用该功能，请记住，此流程是通过在数据库“应用程序”和集合“日志”中实际添加一行来触发的。

我使用 ssl，因此对于常规 http，我们创建一个“http”服务器，并使用标准地址前缀 http://...

从客户端连接

另外作为附加说明，为了使用 MongoWatch，您需要设置具有复制集的 MongoDB。这是一个镜像数据库，可以用作后备（双重用途）。

干杯！再次感谢乔纳森！

【讨论】：