# Binding CollectionView to an ArrayController

**URL:** <https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940>\
**Category:** Uncategorized\
**Created:** [April 11, 2013, 1:24am UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940 "2013-04-11T01:24:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![superlou](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/superlou/32/14585_2.png) [@superlou](https://discuss.emberjs.com/u/superlou)\
**Post date:** [April 11, 2013, 1:24am UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940/1 "2013-04-11T01:24:38Z")

</div>

I am trying to bind the content of a CollectionView to an existing “Tasks” controller. To display the view in my already rendered template, I am using `{{render 'tasks-list'}}`, and the CollectionView and ArrayController are straightfoward:

```
App.TasksListItemView = Ember.View.extend {
	templateName: 'tasks-list-item'
	classNames: ['task-item']
}
 
App.TasksListView = Ember.CollectionView.extend {
	tagName: 'ul'
	classNames: ['tasks-list']
	itemViewClass: App.TasksListItemView
 
	didInsertElement: ->
		this._super();
		this.$().sortable().disableSelection();
		console.log this.get 'controller.content.length'
}
 
App.TasksListController = Ember.ArrayController.extend {
	needs: ['tasks']
	contentBinding: 'controllers.tasks.filteredContent'
}

```

However, the output of the debug statement in `didInsertStatement` is 0 (wrong) or 5 (correctly agreeing with fixtures) depending on where in the router I am. Am I trying to make an antipattern? Would appreciate any comments or a heads up if I’m going the wrong way.

More of the code is available here: [https://gist.github.com/superlou/5359559](https://gist.github.com/superlou/5359559).

---

<div class="post-metadata">

**Author:** ![seilund](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/seilund/32/14351_2.png) [@seilund](https://discuss.emberjs.com/u/seilund)\
**Post date:** [April 14, 2013, 12:59am UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940/2 "2013-04-14T00:59:34Z")

</div>

Create a Jsbin or Jsfiddle with a full example, then people can more easily help you 🙂

---

<div class="post-metadata">

**Author:** ![superlou](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/superlou/32/14585_2.png) [@superlou](https://discuss.emberjs.com/u/superlou)\
**Post date:** [April 14, 2013, 5:12pm UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940/3 "2013-04-14T17:12:11Z")

</div>

Will do. Stuck away from the computer until Tuesday, but will post ASAP.

---

<div class="post-metadata">

**Author:** ![superlou](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/superlou/32/14585_2.png) [@superlou](https://discuss.emberjs.com/u/superlou)\
**Post date:** [April 14, 2013, 7:14pm UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940/4 "2013-04-14T19:14:45Z")

</div>

A simplified fiddle that seems to have the same issue is at [CollectionView and ArrayController - JSFiddle - Code Playground](http://jsfiddle.net/superlou/sUUXj/).

---

<div class="post-metadata">

**Author:** ![panoptic](https://avatars.discourse-cdn.com/v4/letter/p/e19adc/32.png) [@panoptic](https://discuss.emberjs.com/u/panoptic)\
**Post date:** [April 14, 2013, 9:38pm UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940/5 "2013-04-14T21:38:44Z")

</div>

The `content` property of the `CollectionView` isn’t set in the jsfiddle. It’s my understanding that `CollectionView.content` has to be set manually. A quick fix is to do `contentBinding: 'controller'`.

I think it’s OK that calling the `{{render}}` helper doesn’t result in setting of the `content` property as it’s an implementation detail of the `CollectionView`. Although it would be nice if Ember had an `ArrayView` for use with an `ArrayController`. Then the `ArrayView.itemViewClass` instances would have `ArrayController.itemController` instances as their controllers. The `{{render}}` helper could wire everything up. It think the Ember [issue tracker](https://github.com/emberjs/ember.js/issues) is a better place for this discussion.

I’m not sure how this jsfiddle relates to your original post. You mention routes there, but fixing the fiddle didn’t require touching the router at all.

---

<div class="post-metadata">

**Author:** ![superlou](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/superlou/32/14585_2.png) [@superlou](https://discuss.emberjs.com/u/superlou)\
**Post date:** [April 14, 2013, 9:54pm UTC](https://discuss.emberjs.com/t/binding-collectionview-to-an-arraycontroller/940/6 "2013-04-14T21:54:46Z")

</div>

I had made the bad assumption that CollectionView essentially was an ArrayView so the link would be automatic. The fiddle works fine with the fix, and it’s a pretty reasonable thing to put in the code. I thought the render helper was controller-centric (unlike the view helper), so Ember would identify the controller, then the view based on the controller’s name, and would then set content fro mthe controller.

I had initially thought my issue was related to routing possibly, but as I built the fiddle, I sort of convinced myself that that wasn’t a factor. When I get back to the real code tomorrow or Tuesday, I’ll give it a shot there. This fiddle is unfortunately based off memory.