JavaScript MVC struktura

Witam!

Czy przedstawiona poniżej struktura wzorca MVC jest prawidłowa pod kątem JavaScripta?
Jest to trywialny przykład, jednak chciałbym się dowiedzieć, czy przepływ danych pomiędzy poszczególnymi warstwami zaimplementowany w taki sposób jest odpowiedni.

Proszę nie kierować mnie do frameworków MVC typu AngularJS, interesuje mnie implementacja tego wzorca w czystym JS :)

var Model = function(){
  
  this.ModelData = null;
  
  this.SetData = function(data){
    
    this.ModelData = data;
    
  };
  
  this.GetData = function(){
    
    return this.ModelData;
    
  };
  
};


var Controller = function(model){
  
  this.Model = model;
   
  this.Data = null; 
  
  this.SetModelData = function(id){
      
    if(id == 1)
      this.Data = 'test1';
    
    else if(id == 2)
      this.Data = 'test2';
     
    this.Model.SetData(this.Data);
     
  };
  
};


var View = function(model){
  
  this.Model = model;
  
  this.Data = null;
  
  this.Collect = function(){
    
    this.Data = this.Model.GetData();
    
    return this.Data;
      
  };
  
  this.Render = function(){
    
    console.log(this.Collect());
    
  };
  
};

var Bootstrap = function(){
  
    this.Model = new Model();
        
    var AppController = new Controller(this.Model);
    AppController.SetModelData(1);
        
    var AppView = new View(this.Model);
    AppView.Render();
  
};


Bootstrap();

1. Separacja poprawna tzn controller ma namiar na model oraz widok na namiar na model
2. NIepokoi mnie zmienna Data w controllerze która pozniej jest przekazywana do modelu...jakaś duplikacja powinno, dane powinny siedziec i byc czytane z modelu
3. Nie widze w jaki sposób widok reaguje na zmiany w modelu (robi render)
4. Nie widze w jaki sposób są przekazywane zdarzenia (np zapis danych formularz)

Wprowadziłem następującą zmianę w kontrolerze:

 
var Controller = function(model){
 
  this.Model = model;
 
  this.SetModelData = function(id){
 
    if(id == 1)
       this.Model.SetData('test1');
 
    else if(id == 2)
       this.Model.SetData('test2');
 
 
  };
 
};

Oprócz tego kontroler byłby "pobudzany" na przykład zdarzeniem onClick, co powodowałoby ustawienie danych w modelu i również z poziomu kontrolera w tym momencie uruchamiane byłyby funkcje widoku, które pobiorą dane i na przykład wyświetlą.

Pokaż taki przykład właśnie z onClick bo on wiele wyjąśni

Proponuję taką wersję:

Przycisk HTML:

<input type="button" value="click" data-model="1" id="butt" />

JS MVC + jQuery:

var Model = function(){
  
  var ModelData = null;
  
  this.SetData = function(data){
    
    ModelData = data;
    
  };
  
  this.GetData = function(){
    
    return ModelData;
    
  };
  
};


var Controller = function(model, view){
  
  var Model = model;
  var View = view;
  
  var InitView = function(){
      
    View.Render();

  }
    
  this.SetModelData = function(id){
      
    if(id == 1)
      Model.SetData('test1');
    
    else if(id == 2)
      Model.SetData('test2');
      
    else
      Model.SetData('unhandled request');
     
    InitView();    
     
  };
  
};


var View = function(model){
  
  var Model = model;
  
  var Data = null;
  
  var Collect = function(){
    
    Data = Model.GetData();
      
    return Data;
    
  };
  
  this.Render = function(){
    
    console.log(Collect());
    
  };
  
};


$(document).ready(function(){
    
    $("#butt").on("click", function(){
        
        var AppModel = new Model();
        var AppView = new View(AppModel);
        
        var AppController = new Controller(AppModel, AppView);
        
        AppController.SetModelData($(this).data("model"));
        
    });
    
});

1. Widok powinien zapinać zdarzenia z GUI to jego rola a teraz to " $("#butt").on("click", function(){" gdzie się znajduje ?
2. Widok powinien nasluchiwac na zmiany w modelu i sam wiedziec kiedy zrobić render
3. Co to jest data-model na tym buttonie, w końcu model i jego id siedzi w HTML czy w JS
   4

1. Widok powinien zapinać zdarzenia z GUI to jego rola a teraz to " $("#butt").on("click", function(){" gdzie się znajduje ?

Wydelegowałem obsługę zdarzeń do nowego obiektu EventListener, nie chciałbym, żeby widok View obsługiwał zdarzenie i inicjalizował obiekty. Poza tym wyraźnie można przeczytać, że kontroler jest inicjalizowany zdarzeniami, czy miałoby się to odbywać z poziomu widoku, chyba nie...

2. Widok powinien nasluchiwac na zmiany w modelu i sam wiedziec kiedy zrobić render

Nasłuchiwanie załatwia teraz EventListener. Nawet widziałem kiedyś kawałek kodu, w którym kontroler zwracał poprzez return instrukcje związane na przykład ze zdarzeniem onClick i lądowało to pomiędzy $(document).ready...

3. Co to jest data-model na tym buttonie, w końcu model i jego id siedzi w HTML czy w JS

To jest tylko dana dla kontrolera do przeanalizowania. Może niefortunnie nazwałem atrybut, który ją trzyma.

Nowa wersja:

var EventListener = function(){

    this.Init = function(){
        
            $("#butt").on("click", function(){
        
            var AppModel = new Model();
            var AppView = new View(AppModel);
            
            var AppController = new Controller(AppModel, AppView);
            
            AppController.SetModelData($(this).data("model"));
        
        });
    };
      
};

var Model = function(){
  
  var ModelData = null;
  
  this.SetData = function(data){
    
    ModelData = data;
    
  };
  
  this.GetData = function(){
    
    return ModelData;
    
  };
  
};


var Controller = function(model, view){
  
  var Model = model;
  var View = view;
  
  var InitView = function(){
      
    View.Render();

  }
    
  this.SetModelData = function(id){
      
    if(id == 1)
      Model.SetData('test1');
    
    else if(id == 2)
      Model.SetData('test2');
      
    else
      Model.SetData('unhandled request');
     
    InitView();    
     
  };
  
};


var View = function(model){
  
  var Model = model;
  
  var Data = null;
  
  var Collect = function(){
    
    Data = Model.GetData();
      
    return Data;
    
  };
  
  this.Render = function(){
    
    console.log(Collect());
    
  };
  
};

$(document).ready(function(){
    
    var AppEventListener = new EventListener();
    
    AppEventListener.Init();
    
});