3

ハンドルバーのテンプレート内にテンプレートを作成するにはどうすればよいですか？
これらは私のテンプレートです：

<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）をanimal-template内にロードしたいと思います。これどうやってするの？

4

2 に答える 2

7

パーシャルは、いくつかの異なるコンテキストで使用する必要がある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

于 2013-12-19T00:21:24.880 に答える
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>
于 2012-08-08T16:13:17.877 に答える