Как отделить логику просмотра DOM от логики событий DOM (контроллер?) В JavaScript?

Question

Я не уверен, правильно ли я разделяю свое приложение на MVC-логику. Я смущен относительно того, как обращаться с DOM, который занимается как логикой представления, так и событиями. Например:

var HistoryView = function($siblingEl) { 
    this.$el = $(
    '<div class="history">' + 
     '<button class="backward"><</button>' + 
     '<button class="forward">></button>' + 
    '</div>' 
); 
    $siblingEl.after(this.$el); 
    $('.backward').on('click', function() { 
    Events.fire('clickPrev'); 
    }); 

    ... 

, а затем контроллер:

var HistoryManager = function(board, game) { 
    Events.on('clickPrev', function() { 
    var move = History.getPrev(); 
    if (move) { 
     board.undoMove(move); 
     game.turn -= 1; 
     History.undo(); 
    } 
    }); 

    ... 

Хороший кусок кода с моей точкой зрения направлен на то, чтобы слушать события DOM и затем передавая их к моему обычаю Event метаобъекта; мой контроллер затем прослушивает Event, а не DOM. Кажется гораздо более простым, чтобы контроллер прослушивал DOM напрямую, но тогда он должен был бы знать о представлении. Есть ли способ справиться с этим? В Backbone кажется, что представление становится более умным (становится View-Controller). Какие существуют другие подходы?

Answer 1

Для хорошего сравнения между различными способами реализации MV * pattern я нашел, что Todo MVC действительно полезен http://todomvc.com/. Я использую закрытие Google, и мое предпочтение также заключается в объединении контроллера и просмотра в одно. Однако с закрытием вы можете их разделить, создав представление HTML и реализуя интерфейс для объектов вида, которые могут потребоваться контроллеру. См. Пример goog.ui.Control и goog.ui.ControlRenderer. В вашем случае представление предоставит такие методы, как getBackButton() и getForwardButton(). Затем контроллер будет прослушивать события DOM, а не пользовательские события просмотра.

Однако другие люди думают, что View должен прослушивать события DOM, и контроллер должен прослушивать события просмотра (как в вашем примере). Я не думаю, что есть один правильный способ делать что-то. Самое главное, что вы можете легко (единица) проверить свой код;)