[英]handlebars template inside template
如何在手柄中的模板内创建模板?
这些是我的模板:
<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-template或dog-template)加载适当的模板。 我怎样才能做到这一点?
当你有一块Handlebars.js模板需要在几个不同的上下文中使用时, Partial就派上用场了
<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
您可以根据呈现的项目计算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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.