1

ノード アプリケーションの html をレンダリングするために、(ブロック/拡張ヘルパーの例に従って) ハンドルバー + hbs を使用しています。何らかの理由で、私の div の 1 つが 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>

ブロック + 拡張ヘルパー: ( hbs の例から)

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 です。私のプリコンパイル済みハンドルバー テンプレートはすべて、レンダリング時に最初の文字としてこれを出力します。

4

2 に答える 2

1

そこで、テンプレート出力の最初の文字として表示される 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);

ブロック + 拡張ヘルパーは問題とは何の関係もないことがわかりました。使用しているエンコーディングに問題があると想定していますが、それを変更する方法がわかりません。ただし、上記のコードは問題を修正します。

于 2013-01-06T20:45:44.693 に答える
0

解決済み、エンコーディング > UTF-8 で保存

于 2015-07-30T09:32:12.117 に答える