Question

Here’s the setup, I have a mustache template stored as a string, like so

<div id="one">
    <span>
        <img src="{{foo}}" />
    </span>
</div>
<div id="two">
    <span>
        <img src="{{bar}}" />
    </span>
</div>

I’ve inserted it into the page, all good

But now I need to get a part of that template and re-insert it into the page, the problem is jQuery keeps on logging 404 errors because it’s trying to download the image for some reason. (no image pre-loaders or plugins here)

var newTemplate = $(Template).find('#two').html();

I thought this would just operate on the string, but it seems to be parsing it as actual DOM elements and trying to download the images… here’s the error from Chrome

GET http://localhost/src/%7B%7Bphoto%7D%7D 404 (Not Found) /src/js/libs/jquery.js:5952
   jQuery.fn.extend.html /src/js/libs/jquery.js:5952
   jQuery.extend.access /src/js/libs/jquery.js:855
   jQuery.fn.extend.html /src/js/libs/jquery.js:5928
   Backbone.View.extend.search /src/js/views/vote.js:39
   jQuery.event.dispatch /src/js/libs/jquery.js:3332
   jQuery.event.add.elemData.handle.eventHandle

I’ve also tried a few variations like

var foo = $('<div />').html(Template).find('#isotope').html();

and

var foo = $('<div />').detach().html(Template).find('#isotope').html();

what really bugs me is that this works fine if i write the html i want as a plain string,
but that defeats the point

Answer 1

You should use separate strings for your templates. As soon as you pass strings to jQuery’s $() they are turned into DOM elements.