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

Question

I am creating a famo.us app in which header footer and content area is there. In content area different views are rendering using RenderController on action of each other and in each view different sub views are there. Events are communicating through java script using document.dispatchEvent() and addEventLiserner() method instead of famo.us events. I just want to ask that whether it is worth using this listener functions. As I have tried through famous events like setInputHandler, setOnputHandler, emit , addListener, pipe given in famo.us documentation, But I cannot able to communicate using this. The main question is the static app created by me is taking huge time when loaded from server and animations are running very slowly. Is there any solution for this.

Actually code is too long dummy example is below. I am creating an application having header footer and content view. In Content view I am rendering different views using renderController.

Content View

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

Login View

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

I have to render different view on clicking ligin submit button. I have used dispatchEvent and addEventListener of Javascript to make communication between two files. I want to use famous events. I have tried various ways using setInputHandler, setOnputHandler, emit , addListener, pipebut could not able to do that as data and listener functions cannot calling. Please explain..

`Is there any solution for this.` "What is this?". Can you fix your question to include code? `This` is too broad to be able to answer? Unless all you are asking is `How do I dispatch and listen for events between Views?` — talves, Mar 24 '15 at 15:20
Famo.us Events (http://famo.us/docs/api/latest/core/EventHandler) and have that provided as a Global component, which you include within your views and have Events flow. Works just fine when you implement it correctly. — Hans, Mar 29 '15 at 10:40

score 1 · Accepted Answer · answered Mar 30 '15 at 15:17

1

Inside LoginView, replace this code:

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

with:

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

In ContentView, replace:

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

with:

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

answered Mar 30 '15 at 15:17

talves

13,993
5
40
63

I got it.thanks. But If the same event is dispatching from multiple views like LoginView ProfileView and many, then on which view object we can listen??? – Pranali Maske Mar 31 '15 at 11:15
Identity information could be transferred in the data object, but remember you are listening to each element individually. – talves Mar 31 '15 at 15:14

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

1 Answers1