MVC - Übergabe von Daten von der Ansicht zum Controller

Question

Ich bin relativ zu Web-Entwicklung bekannt und ich wurde zu einem Web-Projekt zugewiesen, das ich vor kurzem begonnen habe. Um Sie an Ort und Stelle zu bringen, verwende ich Webpack, um meine Javascript + HTML + CSS-Dateien zu bündeln, und ich möchte MVC folgen.

Mein Problem kommt am Anfang bei der Anmeldung, und da ich gerade das Projekt gestartet habe, macht es mir nichts aus, die Struktur bei Bedarf zu ändern.

Die Sache ist, dass ich eine main.js habe, die loginController.js benötigt, die loginView.js, ein grundlegendes Login-Formular, so dass LoginController loginView erfordert, aber wenn der Benutzer auf die Schaltfläche absenden, welche Funktion ist loginView, I Irgendwie muss der loginController auf das loginModel für Daten zugreifen und es zurückgeben. Also benötigt mein loginController loginView, und mein loginView benötigt loginController, was meiner Meinung nach eine zirkuläre Abhängigkeit verursacht, so wie Webpack meinen Code nicht richtig zu kompilieren scheint.

Offensichtlich mache ich etwas falsch, vielleicht ist die Struktur seit dem Anfang oder irgendein offensichtlicher Code dort platziert, wo es nicht sein sollte. Ich habe ein paar Tage lang gegoogelt, mehr über MVC gelesen, ein paar Fragen in SO gelesen, aber ich kann die Antwort nicht finden, vielleicht bin ich blind.

Wie kann ich das lösen? Der Controller muss wissen, wann die Übergabeschaltfläche gedrückt wird, aber diese Funktion befindet sich in der Ansicht, aber die Ansicht muss den Controller verbinden, um das Modell nach Daten zu fragen und sie zurückzugeben.
Jede Hilfe oder Beratung wird freundlich geschätzt.

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; 

Weitere Informationen:
A main.js Lasten loginController

main.js

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

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

Answer 1

Ich habe es noch nicht ausprobiert. Aber soweit ich mich daran gewöhnt habe, ist es gut, wenn der Controller nur die Ansicht und das Modell kennt und als Kommunikator zwischen diesen beiden fungiert.

Offensichtlich muss die Ansicht mit dem Controller interagieren. Wenn sich der Controller auf der Backend-Seite befindet, geschieht dies oft mit HTTP-Anfragen. Aber auch ein ereignisgesteuerter Ansatz ist möglich. Wie wäre es abfeuern Ereignisse in der Login-Ansicht und der Controller abonniert sie und handelt entsprechend

Da Sie rein Objekte in Ihrem angegebenen Code verwenden eine ereignisgesteuerte Ansatz funktioniert hier nicht direkt. Sie benötigen etwas wie einen Nachrichtenbroker, an dem Komponenten Nachrichten abonnieren und senden können.

ein anderer Ansatz wäre, z.B. die Login-Ansicht und Login-Controller aber nur in der Haupt-js erfordern und den Controller an die Ansicht übergeben oder umgekehrt in main.js. Ihre Entscheidung zu entscheiden, wie sauber das ist.

Callback-Funktion Ansatz:

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

Hier wird die Login-Funktion des Controllers auf die Login-Ansicht übergeben wird und wird aufgerufen, wenn die Schaltfläche reicht ein. Auf diese Weise muss die View nicht den Controller