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

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

本文关键字:js 文件 之间 通信 视图 两个 us Famo      更新时间:2023-09-26

我正在创建一个famo.us应用程序,其中有页眉、页脚和内容区域。在内容区域中,不同的views在彼此的作用下使用RenderController进行渲染,并且在每个视图中存在不同的子视图。事件使用document.dispatchEvent()addEventLiserner()方法而不是famo.us事件通过java script进行通信。我只想问一下,是否值得使用这个监听器函数。正如我尝试过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的各种方法,但由于数据和侦听器函数无法调用,所以无法做到这一点。请解释。。

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