模板内的车把模板

Question

如何在车把模板中创建模板？
那是我的模板：

<script type="text/x-handlebars-template" id="animal-template"> 
    <div class="locationSelect"> 
    {{content}} 
    </div> 
</script> 
<script type="text/x-handlebars-template" id="cat-template"> 
    <div> 
    I am cat 
    </div> 
</script> 
<script type="text/x-handlebars-template" id="dog-template"> 
    <div> 
    I am dog 
    </div> 
</script> 

我想在动物模板中运行（CAT-模板或狗模板）加载拨款模板。我怎样才能做到这一点？

Answer 1

局部模板来当你需要在几个不同的环境下使用一个Handlebars.js模板时，这个功能很方便

<script id="people-template" type="text/x-handlebars-template"> 
    {{#each people}} 
    {{> person}} 
    {{/each}} 
</script> 

<script id="person-partial" type="text/x-handlebars-template"> 
    <div class="person"> 
    <h2>{{first_name}} {{last_name}}</h2> 
    <div class="phone">{{phone}}</div> 
    <div class="email"><a href="mailto:{{email}}">{{email}}</a></div> 
    <div class="since">User since {{member_since}}</div> 
    </div> 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    var template = Handlebars.compile($("#people-template").html()); 
    Handlebars.registerPartial("person", $("#person-partial").html()); 

    template(yourData); 
    } 
</script> 

http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Answer 2

您可以根据所呈现的项目计算templateName的项目视图属性：

App.AnimalView = Ember.View.extend({ 
    templateNameBinding: function() { 
    var kind = this.get('animal.kind'); 
    return '%@-template'.fmt(kind); 
    }.property('animal.kind') 
}); 

然后在容器模板，通过他们的观点呈现的项目：

<script type="text/x-handlebars-template" id="animal-template"> 
    <div class="locationSelect"> 
    {{#for animal in content}} 
    {{view App.AnimalView animalBinding="animal"}} 
    {{/for}} 
    </div> 
</script>