Question

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

实际上代码太长，虚拟示例如下。我正在创建一个具有页眉页脚和内容视图的应用程序。在“内容”视图中，我使用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文件）之间进行通信

1 个答案: