Emberjs Multiple Outlets and leaking collectionView

Question

I'm trying to create a section of an application in Ember wherein there will be more than one outlet in a view and where each outlet will be connected to a collectionView. The problem seems to be that the second outlet becomes 'littered' with the variables of the first.

Now what I'm working on is more involved but: Here's a fiddle of the simplified issue.

There are 3 handlebars templates: The application

{{outlet dogs}}
{{outlet cats}}

Cats

Cat:{{view.content.name}}

Dogs

Dog:{{view.content.name}}

The outlets in the application templates are connected:

index:Em.Route.extend({
    route:'/',
    connectOutlets:function(router, context){

        router.get('applicationController').connectOutlet('cats', 'catsCollection');
        router.get('applicationController').connectOutlet('dogs', 'dogsCollection');
    }, 
})

Then for both the cats and the dogs, I created an object to store the content:

App.Cats = Em.Object.create({
    content:[{name:"Russian Blue"}, {name:"British Short Hair"}, {name:"Domestic Tabby"}]
});

A collection view:

App.CatsCollectionView = Em.CollectionView.extend({
    content:App.Cats.content,
    itemViewClass:'App.CatsView'
});

The view class for the collection view to render:

App.CatsView = Em.View.extend({
    templateName:"cats",
    init:function(){

    }
});

But the result will show the content of the first outlet's collection repeated in the second:

Dog:Huski
Dog:Samoid
Dog:Elkhound
HuskiSamoidElkhound
Cat:Russian Blue
Cat:British Short Hair
Cat:Domestic Tabby

So how is this happening, and how can it be fixed?

DF_ DF_ · Accepted Answer · 2013-02-11T11:12:36

You have overridden the init function with nothing. By default, the View calls init itself and does some fancy magic that you don't see. By declaring that function, you have blocked that from ever being called. If you really want to include the init function, then you should call this._super(); at the top of the function, as seen in the updated jsfiddle.

What this._super(); does is call the init function from the inherited object (in this case the 'View' object) and then executes your additional code.

Emberjs Multiple Outlets and leaking collectionView

1 Answers