Question

我想将多个mustachejs模板集成到更大的父模板中。我想这样做，所以我可以选择仅使用子模板替换其中一个孩子。我正在试图弄清楚如何最好地编译每个模板，然后加入它们，然后替换其中一个孩子。我可以使用我对胡子的原始知识来正常构建模板，但我不知道如何“组合”它们。理想情况下，它将在页面上呈现它们之前完成，因为填充它们的对象是ajax请求，并且可能在不同时间返回。我不希望出现一个“模块”，然后半秒后出现另一个模块。我怎样才能做到这一点。 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

您可以在编译之前合并模板文本吗？这对我来说似乎是最好的方法。通过这种方式，您可以操作模板字符串，然后在所有数据到达时填充一个已编译的函数，将结果元素添加到文档中。

合并多个胡子模板，然后渲染HTML

1 个答案: