Handlebars or backbone insert empty string into html

Question

I'm new to handlebars and backbone and I'm currently trying to have precompiled handlebar templates on my web page. However what happens is that handlebars or backbone, I don't know which, adds an empty string into the DOM. I don't know why. This same thing does not happen when I compile the templates in a backbone view.

What is even stranger to me is that I have one precompiled handlebar template to which this doesn't happen...

Here is a picture of the html when precompiled:

enter image description here

Here is a picture when compiling within a backbone view:

enter image description here

Does anyone know why this is happening?

I've tried to simplify the precompiled template file by compiling only the simplest template that doesn't accept any data and looking into the file for the problem... I've changed the return string, but it didn't fix the issue, so I'm thinking the problem has to be somewhere within backbone...

The simple template:

<div id="channelsContainer"></div>
<div>
    <div id="postsContainer"></div>
    <div>
        <div id="contentContainer"></div>
        <div id="detailsContainer"></div>
    </div>
</div>

Returning the precompiled template from the template function in a backbone view:

template:   function(data)
    {
        return Handlebars.templates['shell.html'];
    }

Returning the template while compiling in the view:

template:   function(data)
        {
            var handlebarTemplate = Handlebars.compile('<div id="channelsContainer"></div> \
<div> \
    <div id="postsContainer"></div> \
    <div> \
        <div id="contentContainer"></div> \
        <div id="detailsContainer"></div> \
    </div> \
</div>');

            return handlebarTemplate;
        }

In the same backbone view, in the initialize method:

this.$el.empty().html(this.template());

Any help with figuring out what is happening is very much appreciated.

Marin Marin · Accepted Answer · 2013-02-16T00:14:08

My colleague found the answer to the problem... He just saved the file with UTF-8 without BOM encoding... Resource: UTF-8 without BOM

It seems that Visual Studio saves the files with an inappropriate encoding...

Thank you both for your support.

Handlebars or backbone insert empty string into html

2 Answers