how to close a view and display another one in famo.us

Question

I have a view consisting differebt surfaces and I want my app to close this view and display another view by clicking a button on the first view,l but I dont know how to close thi first view

this is my code:

   var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');

var mainContext = Engine.createContext();

var myView = new View();
var SecondView=new View();
mainContext.add(myView);


var surface = new Surface({
  size: [100, 100],
  content: 'click me',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});
var surface2= new Surface({
  content:'hi',
  size:[100,100],
  properties:{
    backgroundColor:'pink'
  }
});

myView.add(surface);
SecondView.add(surface2);

surface.pipe(myView);



surface.on('click',function(){
 mainContext.add(SecondView)

});

surface2.on('click',function(){
 mainContext.add(myView)

});

now, it works for the first time! it goes from myView to Second view, and then it will come back, but if you click the surface for the second time it wont work! i feel like i should remove the myView and then display SecondView for it to work but I dunno how!

have you got any code to show us? what have you got so far? – Sam Jul 29 '14 at 08:38 — Sam, Jul 29 '14 at 08:38
@SAMTHEMAN999 I added my code! :) – Zahra Najjari Jul 29 '14 at 09:03 — Zahra Najjari, Jul 29 '14 at 09:03

score 1 · Answer 1 · edited Jul 31 '14 at 19:07

I'm hoping your using a single stand alone surface as just an example and your not actually making a view out of it in practice. Use a Render Controller to show and hide your views.

        var renderer = new RenderContoller;
        var currentPage;

        var showPage1 = function() {
            var Page1View = require('Views/Page1View');
            currentPage = new Page1View();
            renderer.show(currentPage);

            currentPage.on('linkClick', function(){
                console.log('link was clicked');
                renderer.hide();
                currentPage = null;
                showPage2();
            });

        };

A surface inside showPage1 has the following:

            page = this;
            component.on('click', function(){
                page._eventOutput.emit('linkClick');
            });

Hopefully that helps if you don't understand anything above just ask I'll try and explain further.

how to close a view and display another one in famo.us

1 Answers1