Ember ViewFactory for CollectionView

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
<script type="text/x-handlebars" data-template-name="car-template">
    <p>It's a car!</p>
</script>

<script type="text/x-handlebars" data-template-name="airplane-template">
    <p>It's an airplane!</p>
</script>

<script type="text/x-handlebars" data-template-name="bus-template">
    <p>It's a bus!</p>
</script>

<script type="text/x-handlebars" data-template-name="default-template">
    <p>It's a default vehicle!</p>
</script>

JavaScript

/*
    This is a pattern you can use where objects represented by a 
    CollectionView can choose the View class that is used to present them. 
*/

App = Ember.Application.create();

App.CarView = Ember.View.extend({
    templateName: "car-template"
});

App.DefaultView = Ember.View.extend({
    templateName: "default-template"
});

App.AirplaneView = Ember.View.extend({
    templateName: "airplane-template"
});

App.BusView = Ember.View.extend({
    templateName: "bus-template"
});

// Ok! Factory is set up. Let's create our CollectionView
App.collectionView = Em.CollectionView.create({
    itemViewClass: App.DefaultView,
    
    createChildView: function(view, attrs) {
        switch (attrs.content.type) {
            case "car":
               view = App.CarView
               break;
            case "bus": 
               view = App.BusView
               break;
            case "airplane":                
               view = App.AirplaneView
               break;                
        }
        
        return this._super(view, attrs)
    },
    
    content: [
        { type: "car" },
        { type: "bus" },    
        { type: "airplane" },        
        { type: "other" }
    ]
});

App.collectionView.append();