1

I am having issue with the Partials/Sub Template generation in the Handlebars.js.

I have used the registerPartials Method properly, but still it is giving some sort of issue in rendering. If I remove the partial template it would render the content properly.

Below is the code that I am using:

<!DOCTYPE html>
<html>
<head>
    <title>Handlebars.js example</title>
</head>
<body>
    <div id="placeholder">This will get replaced by handlebars.js</div>

    <script type="text/javascript" src="handlebars.js"></script>

    <script id="myTemplate" type="x-handlebars-template">
   {{#each allShoes}}
   <li>
   <span> {{name}} - </span> price: {{price}}
   {{> description}}
   </li>
    {{/each}}
</script>




    <script id="shoe-description" type="x-handlebars-template">
<ul>
    <li>{{color}}</li>
    <li>{{size}}</li>
</ul>
</script>

    <script type="text/javascript">
        var source = document.getElementById("myTemplate").innerHTML;
        var template = Handlebars.compile(source);

        // Register the Partial
        //Handlebars.registerPartial("description", $("#shoe-description").html());

       var shoesData = {
                            allShoes:[
                                        {name:"Nike", price:199.00,color:"black", size:10}, 
                                        {name:"Loafers", price:59.00, color:"blue", size:9}, 
                                        {name:"Wing Tip", price:259.00, color:"brown", size:11}
                                        ]
                            };

        Handlebars.registerPartial("description", $("#shoe-description").html());
        document.getElementById("placeholder").innerHTML = template(shoesData);


    </script>



</body>
</html>

Is there any issue with the registerPartial?

Any help is appreciated.

Thanks, Ankit Tanna

4

1 回答 1

2

我猜您的呈现问题是要求浏览器呈现无效 HTML 的副作用。您的 HTML 或多或少会以这种结构结束：

<div>
    <li>
        <ul>...</ul>
    </li>
    ...
</div>

但是 an<li> 必须有一个<ul>, <ol>, or<menu>作为它的父级。我引用规范：

允许的父元素

ul, ol, 菜单

因此，将 a<div>作为 an 的父级<li>是无效的，浏览器可能会重写您的 not-quite-HTML 以使其成为有效的 HTML。这种更正可能会弄乱您的内部清单。修复您的 HTML 并重试：

<script id="myTemplate" type="x-handlebars-template">
    <ul>
        {{#each allShoes}}
            ...
        {{/each}}
    </ul>
</script>

演示：http: //jsfiddle.net/ambiguous/R23Ak/

于 2013-07-20T19:54:27.580 回答