Question

I’m using handlebars + hbs (following the block/extend helper example) to render html for my node application. For some reason, one of my div’s is getting pushed down 1 line.

I checked the dom inspector in chrome, and there’s a line with double quotes:

Which causes this:

When I remove the double quotes from the dom inspector (press backspace or delete) the layout is correct:

What the crap is going on? Is it a non-printing character or something? There’s nothing in the html/template, and a blank space (or whatever character that is) shouldn’t cause a block level element to change position, right?

Here’s some code:
The relevant section of Layout.html

<div id="details" class="east">{{{block "east"}}}</div>

The template:

<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>

The block + extend helpers: (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;
});

Update
Apparently, this is char 65279, my precompiled handlebars templates all emit this as the first character when rendered.

Answer 1

So I added a hack to remove the BOM that appears as the first character in the template output:

var html = detailTemplate(res.data);
if (html.charCodeAt(0) === 65279) { // hack to fix precompiled hbs template bug
  html = html.substring(1);
}
$("#details").html(html);

It turns out that the block + extend helpers have nothing to do with the problem. I’m assuming it’s a problem with the encoding I’m using, but I’m not sure how to change that. The above code fixes the issue though.