Как общаться между двумя представлениями (разные js-файлы) в Famo.us

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 представить. Я использовал dispatchEvent и addEventListener Javascript для обмена данными между двумя файлами. Я хочу использовать известные события. Я пробовал различные способы, используя 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));