合併多個小鬍子模板，然後呈現HTML

我想將多個mustachejs模板集成到較大的父模板中。我想這樣做，所以我可以選擇稍後使用子模板替換其中一個孩子。我試圖找出如何最好地編譯每個模板，然後加入他們，然後替換其中一個孩子。我可以用我原始的小鬍子知識正常地構建模板，但我不知道如何「結合」它們。理想情況下，它會在頁面上呈現它們之前完成，因爲填充它們的對象是ajax請求，並且可能會在不同的時間返回。我不想讓一個「模塊」出現，然後半秒鐘後出現另一個模塊。我怎樣才能做到這一點。 FIDDLE 合併多個小鬍子模板，然後呈現HTML

<!--templates--> 
<script type="text/html" id="parent"> 
    <div style="color:blue"> 
     AGE: {{age}} 
    </div> 
</script> 

<script type="text/html" id="child1"> 
    <div style="color:green"> 
     AGE: {{age}}} 
    </div> 
</script> 

<script type="text/html" id="child2"> 
    <div style="color:gray"> 
     AGE: {{age}}} 
    </div> 
</script> 
<script type="text/html" id="replacement"> 
    <div style="color:red"> 
     AGE: {{age}}} 
    </div> 
</script> 



//javascript 
//info for templates 
var parent_obj = {"age":"adult"}; 
var child1_obj = {"age":"youngest"}; 
var child2_obj = {"age":"eldest"}; 
var replacement_child_obj = {"age":"brand new"}; 

//get templates 
var parent_src = $("#parent").html(); 
var child1_src = $("#child1").html(); 
var child2_src = $("#child2").html(); 
var replacement_src = $("#replacement").html(); 

//make 3 compiled templates 
var parent_temp = Handlebars.compile(parent_src); 
var child1_temp = Handlebars.compile(child1_src); 
var child2_temp = Handlebars.compile(child2_src); 


//"somehow" combine first 3 into one template 

//render HTML on page 
$("body").append(/*rendered template*/); 


//wait a bit and then replace child1 with replacement template 
var t = setTimeout(function(){ 

    var replacement_temp = Handlebars.compile(replacement_src); 
    //"somehow" insert into already rended HTML 

},1500);

來源

2014-05-15 1252748

您可以在編譯它們之前合併模板文本嗎？這對我來說似乎是最好的方法。通過這種方式，您可以操作模板字符串，然後在所有數據到達時填充一個編譯函數，並將生成的元素添加到文檔中。

來源

2014-05-15 15:47:08

謝謝。然而這對我來說並不合適。該模板不是呈現。 http://jsbin.com/qolokace/1/edit – 1252748

這實際上工作稍微好一些，但我仍然無法將子內容添加到腳本＃父標記內的div中。 '$（「＃parent div」）''和$（「＃parent」）。find（「div」）'都返回空集。有任何想法嗎？ http://jsbin.com/qolokace/5/edit – 1252748

合併多個小鬍子模板，然後呈現HTML

回答

相關問題