incorrect expansion of template handlebars.js

I can’t figure out how handlebars performs templates generation.
i found one case that gives me unwanted results. it seems that handlebars behaves differently depending on the template to be expanded.
below is an example with the code I ran.
first:
preparing the data and running the template is done like this:

<script type="text/JavaScript">
        function showNumbers() {
            var jsondata="[{"number":"one"},{"number":"two"}]"; //the data
            var data=JSON.parse(jsondata);

            var source = $("#listNumbers").html();
            var template = Handlebars.compile(source);
            var html = template({items:data});

            $("#numbers").html(html);
        }
</script>

the first template to expand that works as expected (is very simple)

source:
<script id="listNumbers" type="text/x-handlebars-template">
    <ol>
        {{#items}}
            <li>
                <div>number {{number}}</div>
            </li>
        {{/items}}
    </ol>
</script>

epanded

<div id="numbers">
    <ol>
       <li>
           <div>number one</div>
       </li>
       <li>
           <div>number two</div>
       </li>
    </ol>
</div>

correct!!

Now to the template I simply added a div to put a title above and the number below.

code:
<script id="listNumbers" type="text/x-handlebars-template">
    <ol>
        {{#items}}
            <li>
                <div>number is</div>
                <div>{{number}}</div>
            </li>
        {{/items}}
    </ol>
</script>

expanded:

<div id="numbers">
    <ol>
        <li>
           ** <div>number is
                  <div>one</div>
            </div>**
        </li>
        <li>
           ** <div>number is
                 <div>two</div>
            </div>**
        </li>
    </ol>
</div>

NOT CORRECT!!

In this case the template expanded incorrectly by putting** one div inside the other**!
the resulting html is invalid and the page is displayed incorrectly.

i have done several tests with more structured html and they all expand badly .
Surely I am missing something but I can’t see it.

You need to sign in to view this answers

Related Post