Add surfaces inside a ScrollView in Famo.us

Question

i would like to add individual surfaces to a Scrollview in Famo.us. this is what i have so far can you please point in the right direction. i just want to add surface1, surface2, surface3, etc.

Bellow is the Famo.us code example..

var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Scrollview = require("famous/views/Scrollview");

    var mainContext = Engine.createContext();

    var surface1;
    var surface2;

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

  surface1 = new Surface({
      content: "<h1>Content 1</h1>",
      size: [undefined, undefined],
      properties: {
      backgroundColor: "#2e3d52",
      color: "#ffffff",
      textAlign: 'center'
      }
    });

    surface1.pipe(scrollview);  
    surfaces.push(surface1);

    }


 surface2 = new Surface({
      content: "<h1>Content 2</h1>",
      size: [undefined, undefined],
      properties: {
      backgroundColor: "#2e3d52",
      color: "#ffffff",
      textAlign: 'center'
      }
    });

    surface2.pipe(scrollview);  
    surfaces.push(surface2);

    }

    mainContext.add(scrollview);
});

Answer 1

You have extra curly braces floating around..

Try this..

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");

var mainContext = Engine.createContext();

var surface1;
var surface2;

var scrollview = new Scrollview();
var surfaces = [];

scrollview.sequenceFrom(surfaces);

surface1 = new Surface({
  content: "<h1>Content 1</h1>",
  size: [undefined, undefined],
  properties: {
    backgroundColor: "#2e3d52",
    color: "#ffffff",
    textAlign: 'center'
  }
});

surface1.pipe(scrollview);  
surfaces.push(surface1);

surface2 = new Surface({
  content: "<h1>Content 2</h1>",
  size: [undefined, undefined],
  properties: {
    backgroundColor: "#2e3d52",
    color: "#ffffff",
    textAlign: 'center'
  }
});

surface2.pipe(scrollview);  
surfaces.push(surface2);

mainContext.add(scrollview);