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

Question

I'm relatively knew to web development and I was assigned to a web project that I recently started. To put you in palce, I'm using webpack to bundle my javascript + html + css files and I want to follow MVC.

My problem comes at the start at the login, and as I have just started the project, I don't mind changing the structure if needed.

The thing is that I have a main.js which requires loginController.js which renders loginView.js, a basic login form, so loginController requires loginView, but when the user clicks the submit button, which function is loginView, I need to tell somehow the loginController to access the loginModel for data and return it. So my loginController requires loginView, and my loginView requires loginController, which I believe causes a circular dependency, either way webpack seems not to be able to compile properly my code like that.

Obviously I'm doing something wrong, maybe the structure since the beggining or some obvious code is placed where it shouldn't be. I've googled for a few days, read more about MVC, read a bunch of questions in SO but I can't find the answer, maybe I'm blind.

How can I solve this? The controller needs to know when the submit button is pressed, but that function is in the view, but the view needs to connect the controller to ask the model for data and return it.
Any help or guidance willl be kindly appreciated.

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;

More info:
A main.js loads loginController

main.js

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

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

Answer 1

I haven't tried it out yet. But as far as I am used to it is good if the Controller only knows the View and Model and acts as a communicator between these two.

Obviously the View has to interact with the Controller. If the Controller is on the backend side this often happens with HTTP requests. But also an Event driven approach is possible. How about firing Events in the login View and the Controller subscribes to them and acts accordingly

since you are using purely objects in your stated code an event-driven approach does not directly work here. You would need something like a message broker where components can subscribe to and send messages with.

another approach would be not to require eg the login view and login controller but just require it in main js and pass the controller to the view or vice versa in main.js. Your choice to decide how clean this is.

Callback function approach:

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

Here the login function of the controller gets passed to the login view and will be called when the button submits. This way the View has not to require the Controller