Node.js Jade：向表中添加行

Question

我將Node.js和Jade模板引擎一起使用來創建測試網頁，以確認某些功能可以在實際項目中使用。

根據客戶端IP地址的第一位數字，我想呈現一個帶有表的Jade頁面。 表中的行數等於之前的第一個數字。 例如，如果客戶的地址是192.198.94.227 ，則該表將具有1行。 如果是92.61.131.242 ，那么該表將有9行。

我知道這聽起來很愚蠢，但是我只是用它來測試是否可以為我的真實網站添加不同數量的表行。

Jade或Node.js代碼中有什么方法可以表示這一點？ 或者，如果我不能這樣做，是否有任何解決方法？

Answer 1

使用Jade模板渲染頁面時，可以向模板提供一組變量。

這是處理“ /示例”請求的示例性表達方法。

req.render第一個參數指定模板名稱，第二個參數（一個對象）指定模板參數。 在這種情況下，有兩個參數： ip （客戶IP）和ipFirstDigit客戶IP地址的第一位。

function remoteAddr(req) {
    if (req.ip) {
        return req.ip;
    }
    var socket = req.socket;
    if (socket.socket) {
        return socket.socket.remoteAddress;
    }
    return socket.remoteAddress;
}; 

app.get('/example', function(req, res){
    var ip = remoteAddr(req);
    res.render('index', { ip: ip, ipFirstDigit:ip.charAt(0) });
});

Jade模板可以如下所示：

  p Customer IP: #{ip}
  p Customer IP first digit: #{ipFirstDigit}

  table
    - for (var i = 0; i < ipFirstDigit; i++)
      tr
        td #{i+1}

前兩行顯示客戶IP和客戶IP的第一位。 然后根據客戶IP值的第一位呈現一個表。

IP的輸出： 92.61.131.242如下：

<p>Customer IP: 92.61.131.242</p>
<p>Customer IP first digit: 9</p>
<table>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
  </tbody>
</table>

希望對您的原型有幫助。

Answer 2

實際上，Jade只是一個模板引擎。 正確的解決方案是使用JavaScript修改DOM（文檔對象模型）。 考慮一下Jade只是用於顯示數據的結構。 但在此之前，您需要先處理這些數據。 使用Node.js收集一些必要的信息，然后使用JavaScript（jQuery，AngularJS等）在HTML模板（使用Jade）中操縱DOM。