如何在Famo.us中的两个视图(不同的js文件)之间进行通信
How to communicate between two views( different js files) in Famo.us
我正在创建一个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));
相关文章:
- JS文件的路径正在消失
- 我的外部js文件无法加载
- 在不破坏未定义函数的情况下,对多个视图使用单个js文件
- 动态加载和卸载js文件
- 如何将变量传递到另一个js文件
- 如何将所有JS文件连接到一个文件夹中
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- 如何使用php文件中的GET来获取我在.js文件中声明的变量
- 如何将模板中的标记脚本移动到.js文件中
- 什么's是连接供应商js文件的最佳方式
- 如何在定义js文件后为外部javascript文件设置变量
- 如何在JS文件中获取资源(.resx)字符串
- 将*.js文件的内容放入Object中
- 如何从onclick函数设置全局变量并将其传递给另一个JS文件
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- 如何使用Gmail运行.js文件
- 如何定义一个模块并使用它来分离js文件
- Angular JS文件上传到托管服务器
- 如何引用HTML中节点模块中的js文件
- 如何将JS文件从其他文件夹链接到页面