Question

我正在使用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>

有什么想法吗？

（P.S。我知道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>

Answer 1

以下是如何从印版存储库

执行此操作的示例

我希望你可以模仿它。

（编辑：唯一的错误是https://github.com/flatiron/plates/issues/47）

node.js + plates scrambled output

1 个答案: