Extraneous empty text nodes when formatting .hbs

[skanderm]

Formatting htmlbars templates adds extra text nodes at the beginning and end of component elements. e.g.:

<span>
  {{text}}
</span>

node.childNodes will render: [#text, "test text", #text], whereas <span>{{text}}</span> will render ["test text"].

This is a problem for us, as we're using contenteditable divs and sanitizing nodes is a bit of a pain. The alternative is to keep everything on one line. It'd be nice to have the option to minify/trim the output.

[mmun]

I totally agree but I'm not sure what a good solution is because we want to capture the semantics of HTML as closely as possible.

For a quick fix, you can write this particular template in a compile-to-handlebars language like http://emblemjs.com/ or http://www.hbars.io/ which has more control over whitespace.

[skanderm]

Got it, thanks. One-liner is fine for now.

[reneelung]

@skanderm , what was your solution?

[skanderm]

@reneelung It's a hack, but I moved any control statements outside of any important elements and kept the contents on one line:

{{#if isCondition}}
  <span class='important-thing'>{{text}}</span>
{{else}}
  <span class='important-thing'>{{otherText}}</span>
{{/if}}

[mmun]

@skanderm, @reneelung You can also use the whitespace controller feature of Handlebars:

<span>
  {{~ text ~}}
</span>

is exactly equivalent to

<span>{{text}}</span>

I dont love it, but it does the job.