0

我正在使用 node.js 和 flatiron 板进行模板化，并且在使用数据数组时遇到了乱码输出问题。

我想绑定一个数组以列出 ID 为“list”的项目

JS：

var express = require('express');
var app = express.createServer();
var fs = require('fs');
var plates = require('plates');

var html = fs.readFileSync('plates.html', 'utf-8');

app.get('/', function(req, res) {
    var data = {
        list: [
            "Alpha",
            "Bravo",
            "Charlie",
            "Delta",
        ]
    }
    res.send(plates.bind(html, data))
})

app.listen(8080)

HTML：

<html>
<body>
  <ul>
    <li id="list">REPLACE</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Click the following button.</p>
    <span>Go Back</span>
  </div>
</body>
</html>

我希望输出看起来像这样，其中只有列表项重复：

<body>
  <ul>
    <li id="list">Alpha</li>
    <li id="list">Bravo</li>
    <li id="list">Charlie</li>
    <li id="list">Delta</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Click the following button.</p>
    <span>Go Back</span>
  </div>
</body>
</html>

但是，我得到了这个奇怪的输出，无法理解原因可能是什么：

<html>
<body>
  <ul>
    <li id="list">Alpha</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic<li id="list">Bravo</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic<li id="list">Charlie</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic<li id="list">Delta</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Click the following button.</p>
    <span>Go Back</span>
  </div>
</body>
</html>

有任何想法吗？

（PS 我知道 HTML 不允许重复的 ID，这只是一个例子而不是问题）

更新信息

我运行了 pksankara 成功指出的测试，但是如果我修改测试以使用我的标记，我会失败：

修改 test-16.html：

<ul>
<li class="components"></li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>

输出：

<ul>
<li class="components">Union</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Director</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Broadway</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Plates</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Resourceful</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
4

1 回答 1