JavaScript MVC: как представления уведомляют контроллер

Question

Если я следую грубому шаблону MVC в JavaScript, каков наилучший способ для представления (например, элемента button) уведомить контроллер?

Должен ли button запускать событие, которое должен прослушивать контроллер? Или button должен вызывать функцию контроллера напрямую? Или, может быть, контроллер должен назначить событие представлению?

Спасибо за любой вклад!

Answer 1

Я бы сказал, что Просмотр должен перехватить событие, вызванное кнопкой, и запустить собственное событие, которое будет обработано контроллером .

Позвольте мнеобъяснить:

@ raynos wrote:

Контроллеры прослушивают ввод.Это означает, что контроллеры прослушивают события от узлов DOM

лично, хотя я согласен с первым утверждением, мне не нравится интерпретация.

Следование этому утверждению означает, что контроллер имеетзнать каждую кнопку / текстовое поле / элемент в интерфейсе пользователя и его идентификатор / селектор.

Я предпочитаю иметь семантические события просмотра огня, такие как "languageSelected" или "searchRequested", и добавлять соответствующие данные к событию.

, поэтому типичным потоком будет то, что представление визуализирует некоторыеПользовательский интерфейс (допустим, у него есть окно поиска и кнопка), когда пользователь нажимает кнопку - View обрабатывает событие и запускает свое собственное событие «searchRequested».Это событие обрабатывается контроллером , который вызывает модель , запрашивающую его выполнить поиск.когда это будет сделано, Model запустит evnet «searchResultsUpdated», который будет обрабатываться View , заставляя его показывать результаты.

, если вы решите изменитьдизайн вашего приложения, отображающий ссылки на поисковые термины вместо поля поиска и кнопки (или даже если вы располагаете их рядом - или на разных экранах), единственное, что вам нужно изменить, это Просмотр .

Техническая справка : Если вы используете JQuery и предполагаете, что ваш вид является объектом javascript, вы можете использовать

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

для запуска события

И

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

для прослушивания и обработки события.

Answer 2

Интересный вопрос. Я думаю, что это будет во многом зависеть от вашей ситуации, сложности вашего примера и конкретных шаблонов JavaScript, которые вы используете.

Если кнопка, о которой вы говорите, является просто элементом HTML, это может быть простой способ:

var MyController = function() {

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

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

Или, если ваш button является объектом или модулем, который вы создали, вы можете установить обратный вызов:

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

К сожалению, тривиальные примеры на самом деле не иллюстрируют преимущества различных подходов!

Answer 3

Есть много способов сделать это. Вот один из способов.

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