JavaScript MVC: w jaki sposób widoki powiadamiają kontrolera

Question

Jeśli śledzę szorstki wzorzec MVC w JavaScript, jaki jest najlepszy sposób wyświetlenia (na przykład elementu button), aby powiadomić kontroler?

Czy urządzenie button wywoła zdarzenie, którego sterownik musi słuchać? Lub, czy funkcja button wywołuje funkcję kontrolera bezpośrednio? A może kontroler powinien przypisać wydarzenie do widoku?

Dzięki za wszelkie dane wejściowe!

Answer 1

Interesujące pytanie. Sądzę, że będzie to zależało od twojej sytuacji, złożoności twojego przykładu i konkretnych wzorców JavaScriptu, z których korzystasz.

Jeśli przycisk mówisz to po prostu element HTML, to może być w prosty sposób:

var MyController = function() { 

    this.particularMethod = function() { 
     // update model 
    } 

    // Using jquery 
    var button = $("#myButton"); 
    button.click(function() { myController.particularMethod() }) 
} 

Lub, jeśli button jest przedmiot lub moduł, który został utworzony, można ustawić wywołanie zwrotne:

var Button = function(selector, clickFunction) { 
    // Using jquery 
    $(selector).click(clickFunction) 
    ... 
} 

var MyController = function() { 

    this.particularMethod = function() { 
     // update model 
    } 

    var button = new Button("#myButton", this.particularMethod); 
    ... 
} 

Niestety, trywialne przykłady tak naprawdę nie ilustrują korzyści wynikających z różnych podejść!

Answer 2

Powiedziałbym, że Zobacz powinien złapać zdarzenie zwolniony za pomocą przycisku i ogień własną imprezę, które będą obsługiwane przez kontroler.

Pozwól mi wyjaśnić:

@raynos napisał:

Kontrolery słuchać na wejściu. Oznacza to, że kontrolerzy nasłuchują zdarzeń od węzłów DOM

osobiście, mimo że zgadzam się z pierwszym stwierdzeniem, nie podoba mi się interpretacja.

Podążanie za tym stwierdzeniem oznacza, że ​​kontroler musi znać każdy przycisk/pole tekstowe/element w interfejsie użytkownika i jego identyfikator/selektor.

Preferuję zdarzenia semantyczne Zobacz ogień, takie jak "languageSelected" lub "searchRequested" i dodaj odpowiednie dane do zdarzenia.

więc typowy przepływ byłoby, że widok sprawia pewne UI (powiedzmy, że ma pola wyszukiwania i przycisk), kiedy użytkownik kliknie przycisk - The View obsługuje zdarzenie i pożary własną „searchRequested” zdarzenie. Zdarzenie to jest obsługiwane przez Kontroler, który nazwałby model Model z prośbą o wykonanie wyszukiwania. po zakończeniu, Model uruchomi evnet "searchResultsUpdated", który będzie obsługiwany przez View powodując wyświetlenie wyników.

jeśli teraz zdecydujesz się zmienić projekt swojej aplikacji, aby wyświetlać łącza do wyszukiwanych haseł zamiast pola wyszukiwania i przycisku (lub nawet jeśli masz obok siebie - lub na różnych ekranach) jedyną rzeczą, którą musisz zmiana to Wyświetl.

technicznąej side-note: Jeśli przy użyciu JQuery i zakładając swój pogląd jest javascript obiektu można korzystać

$(view).triggerHandler( 
    $.Event('eventName',{'object:'with','more':'event','related':'data'}) 
); 

do ognia zdarzenie

And

$(view).on('eventName',handler); 

aby słuchać i obsługiwać wydarzenie.

Answer 3

Istnieje wiele sposobów, aby to zrobić. Oto jeden sposób.

var app = new App(); 

function App() { 
    var model = new Model(); 
    var view = new View(); 
    var controller = new Controller(view, model); 
} 

function Controller(view, model) { 
    view.addActionListener(function() { 
    alert("on activate"); 
    }); 
} 

function View() { 
    var self = this; 
    $("button").onclick = function() { 
    self.listener(); 
    } 
} 

View.prototype.addActionListener = function(listener) { 
    this.listener = listener; 
}