我正在使用把手+ hbs(在块/扩展助手示例之后)为我的节点应用程序渲染html。由于某种原因,我的一个div被推下来了1行。
我用chrome检查了dom检查器,并且有一行双引号:
导致这种情况:
当我从dom检查器中删除双引号(按退格键或删除)时,布局正确:
废话是怎么回事?这是一个非打印角色还是什么? html / template中没有任何内容,空格(或任何字符)不应该导致块级元素改变位置,对吗?
以下是一些代码:
Layout.html的相关部分
<div id="details" class="east">{{{block "east"}}}</div>
模板:
<div id="details-title">
<h3 class="title elide" style="height:26px;">{{Title}}</h3>
</div>
<div id="details-body" class="content text">
<img class="card" src="{{ImagePath}}" />
<div>
<span class="type">{{Type}}</span>
</div>
<div class="body">
{{{Body}}}
</div>
</div>
块+扩展助手:(from the hbs example)
hbs.registerHelper("extend", function (name, context) {
var block = blocks[name];
if (!block) {
block = blocks[name] = [];
}
if (typeof context.fn !== "undefined") {
block.push(context.fn(this));
}
});
hbs.registerHelper("block", function (name) {
var val = (blocks[name] || [])
.filter(function () { return true })
.join("\n");
// clear the block
blocks[name] = [];
return val;
});
更新 显然,这是char 65279,我的预编译把手模板都会在渲染时将其作为第一个字符发出。
答案 0 :(得分:1)
所以我添加了一个hack来删除显示为模板输出中第一个字符的BOM:
var html = detailTemplate(res.data);
if (html.charCodeAt(0) === 65279) { // hack to fix precompiled hbs template bug
html = html.substring(1);
}
$("#details").html(html);
事实证明,块+扩展助手与问题无关。我假设这是我正在使用的编码的问题,但我不知道如何改变它。上面的代码解决了这个问题。
答案 1 :(得分:0)
解决,使用编码保存&gt; UTF-8