Using an EmberJS collection view in a dynamic segment seems to cache the view

Question

My EmberApp has Dynamic segments loaded under a resource. The corresponding controller for the dynamic segment is an ArrayController. As most of you would know, simple #each looping through the controllers content or model in the template layer will render the content as it should. And in my case it does, except I need to use a 'CollectionView' which in turn defines a collection of child views. The reason being that I need to perform add/remove these views depending on user actions. So short story, my code looks like this:

<script type="text/x-handlebars" data-template-name="dynamicSegment">
    {{view App.CollectionView}}                                                                                                                                              
</script>
App.CollectionView = Ember.CollectionView.extend({
   tagName: "ul" // does not have a template corresponding to it, but is generated automagically ?
   itemViewClass: Ember.ChildView.extend(),
   didInsertElement:function(){
        this.set('content', this.get('controller').get('content'));  // notice that I am setting up the content for this view in the didInsertElement method, this could be wrong, but I know no other way
   },
});

App.ChildView = Ember.View.extend({
    templateName:"_childView" // has a template defined within handlebars
});
<script type="text/javascript" data-template-name="_childView">
     <div>{{view.content.modelProperty1}}</div> <!-- notice how I have to actually use view.content.modelProperty1 instead of simply modelProperty1
</script>

The above, as you can tell is a slightly unconventional way to render array information in EmberJS, where typically one would simply:

{{#each}}
  {{view App.ChildView}}
{{/each}}

and within that ChildView,

<div>{{modelProperty1}}</div>

THe problem with using collection views seems to be that Ember is caching these views, essentially, when I transition into a new dynamic segment like from /1 to /2 then /2 still renders the same content that was first displayed in the /1 dynamic segment.

What should I be doing or what should I not be doing ?

Answer 1

So for anyone who happens to stumble upon this in the future, if you utilized a collectionView to render elements in a dynamic segment instead of a handlebars each statement, be sure to set the 'contentBinding' property like this

App.MyCollectionView = Ember.CollectionView.extend({
      contentBinding:"controller" // this is the magic property
});

Otherwise your content remains static as you enter different segments of your dynamic segment.

Mark this as the correct answer Or give it a +1 if this was helpful

Answer 2

elements are cached, so didInsertElement doesn't refire. set up a jsbin at emberjs.jsbin.com for more help.