Adding Views to Scrollview in Famo.us - famo.us

Question

This issue concerns adding Views to Scrollview (rather than surfaces).
When adding a View with a single surface everything seems to work as intended. Each View stacks neatly on top of one another.
However when adding a View with multiple surfaces they do not stack nicely. In this case each View seems to be set to the exact height of the scrollview viewport. So if each View is only 100px tall, and the scrollview viewport is 500px tall, there will be 400px of whitespace between each View when scrolling. Also if the View is taller than the scrollview vp, the Views will overlap.
So the question is: How do you add a View will multiple surfaces to a scrollview and have them stack nicely?
Example function to build the scrollview...
function _createScrollview() {
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0, temp; i < 10; i++) {
temp = new TestView();
temp.pipe(scrollview);
surfaces.push(temp);
}
this.add(scrollview);
}
Example of View...
define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
// constructor
function TestView() {
View.apply(this, arguments);
_createBox_a.call(this);
_createBox_b.call(this);
}
// prototype
TestView.prototype = Object.create(View.prototype);
TestView.prototype.constructor = TestView;
// options
TestView.DEFAULT_OPTIONS = {};
// helper functions
function _createBox_a() {
var surf = new Surface({
size: [undefined, 150],
properties: {
backgroundColor: 'red',
}
});
surf.pipe(this._eventOutput);
this.add(surf);
}
function _createBox_b() {
var surf = new Surface({
size: [undefined, 150],
properties: {
backgroundColor: 'blue'
}
});
var mod = new StateModifier({
transform: Transform.translate(0, 150, 0)
});
surf.pipe(this._eventOutput);
this.add(mod).add(surf);
}
module.exports = TestView;
});

Answer 1

View does not know how large it is supposed to be. If you call temp.getSize() in your example, 'undefined' is returned. You will want to explicitly set the size during initialization.. If you must set the size after initialization, it will be..
view.setOptions({size:someSize});
Here is how _createScrollview could look..
Hope this helps!
function _createScrollview() {
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0, temp; i < 10; i++) {
temp = new TestView({size:[undefined,300]});
temp.pipe(scrollview);
surfaces.push(temp);
}
this.add(scrollview);
}