如何在 Famo.us 中的两个视图（不同的 js 文件）之间进行通信

Question

我正在创建一个famo.us 应用程序，其中有页眉页脚和内容区域。在内容区域中，不同的views 正在使用RenderController 对彼此的操作进行渲染，并且在每个视图中都有不同的子视图。事件通过java script 使用document.dispatchEvent() 和addEventLiserner() 方法而不是famo.us 事件进行通信。我只是想问一下是否值得使用这个监听器函数。 正如我尝试通过famo.us 文档中给出的setInputHandler, setOnputHandler, emit , addListener, pipe 等著名事件，但我无法使用它进行交流。 主要问题是我创建的静态应用程序从服务器加载时需要大量时间，并且动画运行非常缓慢。有什么解决方案。

实际上代码太长了，下面是虚拟示例。我正在创建一个具有页眉页脚和内容视图的应用程序。在内容视图中，我使用 renderController 呈现不同的视图。

内容视图

define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var LoginView = require('views/login/LoginView');
var AccountsView = require('views/login/AccountsView'); //need to call on login
function ContentView() {
    View.apply(this, arguments);
    var  renderController = new RenderController({
            inTransition: {curve: Easing.easeOut, duration: 1000},
            outTransition: {curve: Easing.easeIn, duration: 1000},
            overlap: true,
        });
    var loginview = new LoginView();
    renderController.show(loginview); //rendered initially
   this.add(renderController);
   document.addEventListener("showAccountsView",function(){
            var accoutsView = new AccountsView()
            renderController.show(accoutsView);
    }.bind(this));
}
});

登录查看

 define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var InputSurface = require("famous/surfaces/InputSurface");
    function LoginView() {
        View.apply(this, arguments);
       var loginBoxContainer = new ContainerSurface({
            classes:["backfaceVisibility"],
            size:[undefined,295],
            properties: {
                overflow: 'hidden',
                padding:'0 10px'
            }
        });
        this.add(loginBoxContainer);
        var userInput = new InputSurface({
            size: [undefined, 45],
        });
       var userInputModifier = new StateModifier({
            transform: Transform.translate(0,53,1)
        });
        var pwdInput = new InputSurface({
            classes:["pwdInput"],
            size: [undefined, 45],
        });
        var pwdInputModifier = new StateModifier({
            transform: Transform.translate(0,100,1)
        });
        loginBoxContainer.add(userInputModifier).add(userInput);
        loginBoxContainer.add(pwdInputModifier).add(pwdInput);
        var submit = new Surface({
        content:["Submit"],
        size:[100,30],
        });
        submit.on("click",function(){
           document.dispatchEvent(new Event("showAccountsView"));
        });
        loginBoxContainer.add(submit);
    }
    });

我必须在单击 ligin 提交按钮时呈现不同的视图。我使用了 Javascript 的 dispatchEvent 和 addEventListener 在两个文件之间进行通信。我想使用著名的事件。我已经尝试过使用setInputHandler, setOnputHandler, emit , addListener, pipe 的各种方法，但由于数据和侦听器函数无法调用而无法做到这一点。请解释..

Answer 1

在LoginView内，替换这段代码：

    submit.on("click",function(){
       document.dispatchEvent(new Event("showAccountsView"));
    });

与：

    submit.on("click",function(){
       this._eventOutput.emit('showAccountsView', { data: someValue });
    });

在ContentView 中，替换：

     document.addEventListener("showAccountsView",function(){
        var accoutsView = new AccountsView()
        renderController.show(accoutsView);
     }.bind(this));

与：

     loginView.on('showAccountsView', function(data){
        var accoutsView = new AccountsView()
        renderController.show(accoutsView);
     }.bind(this));