CollectionView with different templates

by jefflab

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script type="text/x-handlebars" data-template-name="a" >
    a template for {{view.content.label}}
</script>
<script type="text/x-handlebars" data-template-name="b" >
    b template for {{view.content.label}}
</script>
<script type="text/x-handlebars" >
    BEFORE
    {{view App.MyView contentBinding="App.controller.item" }}
    AFTER
</script>

JavaScript

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

App.Item = Ember.Object.extend();

App.controller = Ember.Controller.create({
    item: null
});

App.MyView = Ember.View.extend({
    templateName: function() {
        var templateName = this.get('content.label'); 
        return (!Ember.TEMPLATES[templateName]) ? 'default' : templateName;
    }.property('content.label')
});

App.controller.set('item', App.Item.create({ label: 'a' }));
App.controller.set('item', App.Item.create({ label: 'b' }));