problem rendering icanhaz/mustache loop with jquery 1.9.1

[ducin]

First of all, I like icanhaz a lot!

I'm not quite sure if it's related to icanhaz or mustache. I got very strange problem with rendering looped values (the problem was also published on stackoverflow).

When trying to render the following:

<script id="myTemplate" type="text/html">
    {{#stuff}}
    <option value="{{key}}">{{desc}}</option>
    {{/stuff}}
</script>

<script>
    $(document).ready( function() {

        var listOfStuff = {stuff: [ 
                {key: "1", desc: "First"},
                {key: "2", desc: "Second"}
            ]};
        var x = ich.myTemplate(listOfStuff);
        $("#mySelectBox").append(x);
    });
</script>

jquery 1.8.3 works perfectly (look at the fiddle), whereas jquery 1.9.1 crashes (look at different fiddle). If you check out javascript console for 1.9.1 you'll see the following error:

Uncaught Error: Syntax error, unrecognized expression: <option value="1">First</option>
                    <option value="2">Second</option>

Do you know what is the problem? Is there a known problem with jquery 1.9.1 working with icanhaz or mustache?

[HenrikJoreteg]

ah, yeah... so jQuery 1.9 changed how they parse html when you pass html strings to it... for example: $("<div>") the docs say that anything that start with < will get parsed as HTML but from my experience, having any newlines in that string will also make it fail. As you said, this is new to 1.9.

We should probably make it so that ICanHaz.js strips out newlines after rendering templates or that it "domify's" the html in some other way.

If you're running into this, you could take a stab at fixing it and sending a pull request. I've got a few too many other things going in the near term to fix this right now.

[ducin]

but from my experience, having any newlines in that string will also make it fail

You're absolutely right! Removing newlines make it work even with jquery 1.9.1 - I mean changing from:

<script id="myTemplate" type="text/html">
    {{#stuff}}
    <option value="{{key}}">{{desc}}</option>
    {{/stuff}}
</script>

to

<script id="myTemplate" type="text/html">
    {{#stuff}}<option value="{{key}}">{{desc}}</option>{{/stuff}}
</script>

[ksze]

Small caveat: stripping newlines will mess up the content in <pre> tags. ;-)

[HenrikJoreteg]

there's another workaround. jQuery has a parseHtml method that we could us in ICH.

Something like:

$($.parseHtml(templateString));

On Thursday, March 28, 2013 at 1:22 AM, Kal Sze wrote:

Small caveat: stripping newlines will mess up the content in
tags. ;-)

—
Reply to this email directly or view it on GitHub (#58 (comment)).

[getfatday]

@HenrikJoreteg Added PR #61 that uses the existing trim function to remove the leading whitespace. Let me know what you think.

[18steps]

@getfatday I was having the same problem as @tkoomzaaskz and your solution fixed it for me. Thank you. I'm new to github, so let me know if I should comment somewhere or upvote something.

[getfatday]

@mikalmadsen your comment is good enough. Thanks for the confirmation.

[ducin]

cool, thanks guys ;)