여러 콧수염 템플릿을 결합한 다음 HTML을 렌더링

Question

여러 개의 mustachejs 템플릿을 더 큰 상위 템플릿에 통합하고 싶습니다. 나중에 자식 중 하나를 사용하여 자식 중 하나를 대체 할 수있는 옵션이 있으므로이 작업을 수행하고 싶습니다. 각 템플릿을 컴파일하는 가장 좋은 방법을 파악한 다음 결합하여 어린이 중 하나를 교체하려고합니다. 나는 콧수염에 대한 나의 원시 지식을 사용하여 정상적으로 템플릿을 만들 수 있지만 어떻게 그들을 "결합하는"방법을 모르겠다. 이상적으로는 페이지에 렌더링되기 전에 완료되어야합니다. 객체를 채우는 객체는 아약스 요청이며 다른 시간에 다시 올 수 있습니다. 하나의 "모듈"이 나타나기를 원하지 않을 것입니다. 그런 다음 0.5 초 후에 다른 모듈이 나옵니다. 이것을 어떻게 할 수 있습니까? FIDDLE

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

Answer 1

템플릿 텍스트를 컴파일하기 전에 결합 할 수 있습니까? 그것은 나에게 가장 좋은 접근법처럼 보입니다. 이 방법으로 템플릿 문자열을 조작 한 다음 모든 데이터가 도착하면 채워진 하나의 컴파일 된 함수를 만들어 결과 요소를 문서에 추가 할 수 있습니다.