Emberjs - Outlet Conflict

by amindunited

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet cats}}
    {{outlet dogs}}
</script>
<script type="text/x-handlebars" data-template-name="cats">
    Cat:{{view.content.name}}
</script>
<script type="text/x-handlebars" data-template-name="dogs">
    Dog:{{view.content.name}}
</script>

CSS

body {
    background-image: url(http://handlebarsjs.com/images/noise.png);
    background-image: url("http://handlebarsjs.com/images/noise.png");
}
a {
    cursor: pointer;
}
.foo {
    color:red;
}

JavaScript

$(function(){
	//Bind Application name to window
    window.App = Em.Application.create({
        autoInit: false
    })
    
    //Create Application controller, view and router
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({});
    App.router = Em.Router.create({
        enableLogging:true,
        location: 'none',
        root:Em.Route.extend({
            index:Em.Route.extend({
                route:'/',
                connectOutlets:function(router, context){
                    router.get('applicationController').connectOutlet('cats', 'catsCollection');
                    router.get('applicationController').connectOutlet('dogs', 'dogsCollection');
                }, 
            })
        })
    });
    /////////////////////////////////////////////////////////////////////////////////////////
    //CATS
    
    App.Cats = Em.Object.create({
        content:[{name:"Russian Blue"}, {name:"British Short Hair"}, {name:"Domestic Tabby"}]
    });
    App.CatsController = Em.Controller.create();
    App.CatsCollectionView = Em.CollectionView.extend({
        content:App.Cats.content,
        itemViewClass:'App.CatsView'
    });
    App.CatsView = Em.View.extend({
        templateName:"cats",
        init:function(){
            console.log("arg");
        }
    });
    
   /////////////////////////////////////////////////////////////////////////////////////////
    //DOGS
    App.Dogs = Em.Object.create({
        content:[{name:"Huski"}, {name:"Samoid"}, {name:"Elkhound"}]
    });
    App.DogsController = Em.Controller.create();
    App.DogsCollectionView = Em.CollectionView.extend({
        content:App.Dogs.content,
        itemViewClass:'App.DogsView'
    });
    App.DogsView = Em.View.extend({
        templateName:"dogs",
        init:function(){
            console.log("Dogs arg");
        }
    });
    
    
    
    //Start the app
    App.initialize(App.router);
    
});