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

這裏控制器的登錄功能被傳遞給登錄視圖將被命名當按鈕提交。這種方式視圖不需要控制器