如何在 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));

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

How to communicate between two views( different js files) in Famo.us

javascript

famo.us