テンプレートに 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>