Javascript 关于如何组合使用相同数据的2个把手模板的建议？

我目前正在学习如何使用把手制作模板，并希望获得一些建议，了解如何将以下两个模板合并为一个模板并更新脚本，以便每个按钮仍显示正确的值集

模板

<script type="text/x-handlebars" id="infoTemp">
    {{#each films}}
    <li>
        <h2>{{title}}</h2>
        <p>{{{description}}}</p>        
    </li>
    {{/each}}
</script>
<script type="text/x-handlebars" id="additionalInfoTemp">
    {{#each films}}
    <li>
        <h1>{{id}}</h1>
        <h2>{{title}}</h2>
        <p>{{{description}}}</p>
        <small>{{released}}</small>        
    </li>
    {{/each}}
</script>

{{{每部电影}

{{title}}
{{{description}}}


{{/每个}}
{{{每部电影}

{{id}
{{title}}
{{{description}}}

{{released}}

{{/每个}}

JS

// Dummy data
data = {
    "films": [
    {
        "id": "1",
        "title": "The Shawshank Redemption",
        "description": "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
        "released": "2012-09-17 00:00:00"
    },
    {
        "id": "2",
        "title": "The Godfather",
        "description": "The aging <b>patriarch of an organized</b> crime dynasty transfers control of his clandestine empire to his reluctant son.",
        "released": "2012-09-17 00:00:00"
    }
    ]
}

var $info = $('#info');
var source;
//Grab contents of template

function templateData(id){
    if( id == 'add1' ){
        source = $("#infoTemp").html();
    } else {
        source = $("#additionalInfoTemp").html();
    }

    var template = Handlebars.compile(source);
    $info.append(template(data));
}

//Grab the container div and insert the templated data in


$('button').on('click', function(e){
    var thisData = $(this).data('id');

    $info.html('');

    templateData(thisData);

    e.preventDefault();
});

//伪数据
数据={
“电影”：[
{
“id”：“1”，
“标题”：“肖申克的救赎”，
“描述”：“两名被监禁的男子在数年的时间里保持着联系，通过共同的体面行为寻求慰藉并最终获得救赎。”，
“发布”：“2012-09-17 00:00:00”
},
{
“id”：“2”，
“头衔”：“教父”，
“描述”：“一个有组织犯罪王朝的年长族长将其秘密帝国的控制权移交给了他不情愿的儿子。”，
“发布”：“2012-09-17 00:00:00”
}
]
}
var$info=$（“#info”）；
var源；
//抓取模板的内容
函数模板数据（id）{
如果（id='add1'）{
source=$（“#infoTemp”）.html（）；
}否则{
source=$（“#additionalInfoTemp”）.html（）；
}
var template=handlebar.compile（源代码）；
$info.append（模板（数据））；
}
//抓取容器div并将模板化数据插入
$（'button'）。在（'click'）上，函数（e）{
var thisData=$（this.data（'id'）；
$info.html（“”）；
模板数据（thisData）；
e、 预防默认值（）；
});

JS小提琴

---

​

您可以检查每个变量是否存在，并仅在存在的情况下呈现

h1

和

released

：

<script type="text/x-handlebars" id="additionalInfoTemp">
    {{#each films}}
    <li>
        {{#id}}<h1>{{.}}</h1>{{/id}}
        <h2>{{title}}</h2>
        <p>{{{description}}}</p>
        {{#released}}<small>{{.}}</small>{{/released}}
    </li>
    {{/each}}
</script>

{{{每部电影}

{{{{{}{{}{{{}{{/id}}
{{title}}
{{{description}}}

{{{{{}}{{}{{}{{/released}}

{{/每个}}

嘿，问题是两种情况下的数据都是相同的，这意味着每个变量都会存在？那么这些都是有效的单独模板。如果要重用模板，可以创建不提供“id”或“released”的不同数据视图。