Dynamic templates

by tracyfu

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.ItemView = Ember.View.extend({
    templateName: function() {
        var name = Ember.getPath(this, 'content.name');
        return (name.indexOf('foo') !== -1) ? 'foo-item' : 'bar-item';
    }.property('content.name').cacheable(),

    _templateChanged: function() {
        this.rerender();
    }.observes('templateName')
});

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

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

Ember.run.later(function() {
    App.items.objectAt(0).set('name', 'bar changed');
}, 1000);