MVC - 将数据从视图传递到控制器

Question

我对Web开发相对熟悉，并且我被分配到了最近开始的一个Web项目。为了把你放在palce，我使用webpack绑定我的javascript + html + css文件，并且我想遵循MVC。

我的问题出现在登录开始时，并且正如我刚开始的项目，我不介意在需要时更改结构。

问题是我有一个main.js，它需要loginController.js来呈现loginView.js，这是一个基本的登录窗体，因此loginController需要loginView，但是当用户单击提交按钮时，哪个函数是loginView，我需要以某种方式告诉loginController访问loginModel的数据并返回它。所以我的loginController需要loginView，而我的loginView需要loginController，我相信这会导致循环依赖，无论哪种方式，webpack似乎都无法正确编译我的代码。

显然我做错了什么，也许结构自开始或一些明显的代码被放置在它不应该的地方。我搜索了几天，阅读了更多有关MVC，阅读了一堆问题，但我找不到答案，也许我是盲目的。

我该如何解决这个问题？控制器需要知道按下提交按钮的时间，但该功能在视图中，但视图需要连接控制器以向模型请求数据并将其返回。
任何帮助或指导将不胜感激。

loginController.js

var loginViewAux = require('./loginView.js'); 
var loginModelAux = require('./loginModel.js'); 
var LoginView, LoginModel; 

LoginController = function() { 
    LoginView = new loginViewAux(); 
    LoginModel = new loginModelAux(); 

} 
LoginController.prototype.render = function() { 
    LoginView.render(); 
}; 
LoginController.prototype.setEvents = function() { 
    LoginView.setEvents(); 
} 
LoginController.prototype.login = function(username, password) { 
    return LoginModel.loginPost(username, password); 
}; 

module.exports = LoginController; 

loginView.js

require('./login.css'); 
var loginTemplate = require('./loginTemplate.html'); 
var logo = require('./../img/ttlvd-color-alborde.png'); 
var LoginController = require('./loginController.js'); 


LoginView = function() {} 

LoginView.prototype.render = function() { 
    $('#loginContainer').html(loginTemplate); 
    $('#loginLogo').attr("src", logo); 
} 

LoginView.prototype.setEvents = function() { 
    $('#btnSubmit').on('click', function(e) { 
     var username, password; 
     e.preventDefault(); 

     username = $('#loginFormUsername').html(); 
     password = $('#loginFormPassword').html(); 
     var result = LoginController.login(username, password); 
     console.log(result); 
    }); 
} 

module.exports = LoginView; 

更多信息：
一个main.js负载的LoginController

main.js

require('./style.css'); 
var loginControllerAux = require('./app/login/loginController.js'); 
var LoginController = new loginControllerAux(); 

LoginController.setEvents(); 
LoginController.render(); 

Answer 1

我还没有尝试过。但就我习惯而言，如果控制器只知道视图和模型，并充当这两者之间的沟通者，那就好了。

显然，视图必须与控制器交互。如果控制器在后端，这通常发生在HTTP请求中。而且事件驱动的方法也是可能的。怎么样在登录视图和控制器订阅他们的事件，并采取相应的行动

因为您在所述的代码中使用纯粹的对象事件驱动的方法不直接在这里工作。您需要类似于组件可以订阅和发送消息的消息代理。

另一种方法是不要求例如登录视图和登录控制器，但只需要它在主js中，并将控制器传递给视图，反之亦然main.js。您选择决定这是多么清洁。

回调函数的方法：

LoginView：

LoginView.prototype.setLoginEvent = function(callback) { 
    $('#btnSubmit').on('click', function(e) { 
     var username, password; 
     e.preventDefault(); 

     username = $('#loginFormUsername').html(); 
     password = $('#loginFormPassword').html(); 
     var result = callback(username, password); 
     console.log(result); 
    }); 
} 

的LoginController：

LoginController.prototype.setEvents = function() { 
    LoginView.setLoginEvent(this.login); 
} 

这里控制器的登录功能被传递给登录视图将被命名当按钮提交。这种方式视图不需要控制器