Dynamic templates

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars" data-template-name="foo-item">
    I'm a row of type "foo" - {{content.name}}
</script>

<script type="text/x-handlebars" data-template-name="bar-item">
    I'm a row of type "bar" - {{content.name}}
</script>

<script type="text/x-handlebars">
    {{#each App.items}}
        {{view App.ItemView contentBinding="this"}}
    {{/each}}
</script>

JavaScript

App = Ember.Application.create({});

App.Foo = Ember.Object.extend();
App.Bar = Ember.Object.extend();

App.ItemView = Ember.View.extend({
    templateName: function() {
        if (this.get("content") instanceof App.Foo) {
            return "foo-item";
        } else {
            return "bar-item";
        }
    }.property().cacheable()
});

App.items = Ember.ArrayController.create({
    content: []
});

App.items.pushObject(App.Foo.create({name: "foo 1"}));
App.items.pushObject(App.Bar.create({name: "bar 1"}));
App.items.pushObject(App.Foo.create({name: "foo 2"}));
App.items.pushObject(App.Bar.create({name: "bar 2"}));