Question

我遇到了Handlebars.js中的Partials / Sub Template生成问题。

我已经正确使用了registerPartials方法，但它在呈现时仍然存在某种问题。如果我删除部分模板，它将正确呈现内容。

以下是我正在使用的代码：

<!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>

registerPartial有什么问题吗？

感谢任何帮助。

谢谢， Ankit Tanna

Answer 1

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

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

但<li> 必须以<ul>，<ol>或<menu>作为其父级。我引用specification：

允许的父元素

ul，ol，menu

因此<div>作为<li>的父级是无效的，浏览器可能会重写您的不完全HTML以使其成为有效的HTML。这种纠正可能会使你的内心清单变得混乱。修复您的HTML并重试：

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

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

Handlebars.js部分子模板生成

1 个答案: