Search code examples
javascriptcanjs

CanJS view return @@!!@@ if view contain HTML table

I'm using http://canjs.com/ lasted version with Chromium 28.0.1500.71 (Developer Build 28.0.1500.71-0ubuntu1.12.10.1) Ubuntu 12.10

For example, I have this template script:

<script type="text/ejs" id="sequenceDetail">
    <header><%= this.qname %></header>
    <% this.stories.each(function(story) { %>
    <div>Story ID: <%= story.id %>GStory ID: <%= story.gstoriesid %></div>
    <table>
        <tr>
            <td>Story ID:</td>
            <td>GStory ID:</td>
        </tr>
    </table>
    <% }); %>
</script>

This will send me something like:

<article>
    <header>Fun Fact Lab</header>
    @@!!@@
</article>

But if I change the template to (remove the table):

<script type="text/ejs" id="sequenceDetail">
    <header><%= this.qname %></header>
    <% this.stories.each(function(story) { %>
    <div>Story ID: <%= story.id %>GStory ID: <%= story.gstoriesid %></div>
    <% }); %>
</script>

And then I will get what I want:

<header>Fun Fact Lab</header>
<div>Story ID: 517587GStory ID: 0</div>
<div>Story ID: 517588GStory ID: 0</div>
<div>Story ID: 517589GStory ID: 0</div>

Is this a bug with this lib or my mistake?

Solution

  • Looks like it's a bug in CanJS. I was able to get around it by wrapping the whole template in another element:

    <script type="text/ejs" id="sequenceDetail">
<div>
    <header><%= this.qname %></header>
    <% this.stories.each(function(story) { %>
    <div>Story ID: <%= story.id %>GStory ID: <%= story.gstoriesid %></div>
    <% }); %>
</div>
</script>

    I've left a comment for them on a bug which looks like it's the same issue.