gistfile1.js

col = CDFleet.CDObject.collection();
CDFleet.objectsController.set('content', col);
col.refresh();
 
sv = SC.ScrollView.extend({
 emptyElement: '<div style="border:1px solid green;"><div class="id_123abc"></div></div>',
 outlets: ['listView'],
 listView: SC.ListView.extend({
  contentBinding: 'CDFleet.objectsController.arrangedObjects',
  selectionBinding: 'CDFleet.objectsController.selection',            
  contentValueKey: 'displayString',
  computeFrame: function() { return { height: 200 }; } 
 }).outletFor('.id_123abc?')
}).viewFor(null);

sv.setStyle({ overflow: 'auto', height: '200px', width: '300px' });
 
ws = SC.page.getPath('desktopView.workspace');
ws.replaceContent(sv);
 
sv.awake(); // sync all bindings to views
 
console.log(CDFleet.objectsController.arrangedObjects); // displays the arranged collection
console.log(CDFleet.objectsController.arrangedObjects.get('length')); // 3
console.log(sv.listView.get('content')); // no longer [] now displays the arranged collection, thanks to help from okito with the awake()
console.log(sv.listView.get('content').get('length')); // 3
 
// listView only displays the first object in the arranged collection, used this.get('frame') in ListView#contentRangeInFrame to display all
// var frame = this.get('frame') || frame; was added to framework/sproutcore/views/collection/conllection.js line 49
console.log(sv.listView.get('nowShowingRange')); // Object start=0 length=1 without var frame && Object start=0 length=3 with var frame
console.log(sv.listView.get('clippingFrame')); // Object x=8 y=1 width=293 height=0
console.log(sv.listView.get('frame')); //  Object x=1 y=1 width=300 height=200