javascript - 如何在 famo.us 中关闭一个 View 并显示另一个 View

Question

我有一个由不同表面组成的 View ，我希望我的应用程序关闭此 View 并通过单击第一个 View 上的按钮来显示另一个 View ，但我不知道如何关闭第一个 View

这是我的代码:

   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)

});

现在，它第一次工作了!它从 myView 转到第二个 View ，然后它会返回，但是如果您第二次单击该表面，它将不起作用!我觉得我应该删除 myView，然后显示 SecondView 才能正常工作，但我不知道如何!

Answer 1

我希望您使用单个独立表面作为示例，并且您实际上并没有在实践中从中创建 View 。使用渲染 Controller 来显示和隐藏您的 View 。

        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();
            });

        };

showPage1 内的表面具有以下内容:

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

如果您不明白以上任何内容，希望对您有所帮助，请询问我，我会尝试进一步解释。