Binding CollectionView to an ArrayController

1

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.

2

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

3

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

4

A simplified fiddle that seems to have the same issue is at CollectionView and ArrayController - JSFiddle - Code Playground.

5

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 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.

6

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.