Handlebars.js部分子模板生成

我在Handlebars.js中生成部分/子模板時遇到問題。Handlebars.js部分子模板生成

我已經正確使用了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塔納

來源

2013-07-20 Ankit Tanna

我猜你的渲染問題是要求瀏覽器渲染無效的HTML的副作用。你的HTML結束了，或多或少，這樣的結構：

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

但是一個<li>必須有<ul>，<ol>，或者<menu>是其父母。我引用specification：

允許父元素

UL，OL，菜單

有這麼一個<div>爲<li>的父母是無效的，瀏覽器可能重寫你不-quite-HTML使其成爲有效的HTML。這種改正可能會讓你的內部列表變得混亂。修正你的HTML，然後再試一次：

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

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

來源

2013-07-20 19:54:27

非常感謝MU.But HTML一般使內容吧？你真棒與handlebars.js :) –

問題是，同樣的事情在Dreamweaver CC產品實時視圖中不起作用。不知道爲什麼！將嘗試導入您正在使用的Handlebars庫。會及時向大家發佈。 –

對不起，問題是我使用的jQuery文件被損壞。它的默認導入就像在jsfiddle中檢查框一樣。但它不適用於我的情況。 :)現在它的工作。 –

Handlebars.js部分子模板生成

回答

相關問題