如何在JavaScript中将DOM视图逻辑与DOM事件（控制器？）逻辑分离？

我不确定我是否正确地将应用程序分离到MVC逻辑中。我对如何处理DOM感到困惑，因为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');
  });

  ...

---

我的视图的大部分代码都用于侦听DOM事件，然后将它们传递给我的自定义

事件
元对象；然后，我的控制器侦听
事件
，而不是DOM。让控制器直接侦听DOM似乎简单得多，但它必须了解视图。有办法解决这个问题吗？在主干中，视图似乎变得更加智能（成为视图控制器）。还有什么其他方法？
为了更好地比较实现MV*模式的不同方法，我发现Todo MVC非常有用。我使用谷歌闭包，我的首选也是将控制器和视图合并为一个。但是，通过闭包，您可以通过让视图创建HTML并为控制器可能需要的视图对象实现一个接口来将它们分开。有关示例，请参见goog.ui.Control和goog.ui.ControlRenderer。在您的情况下，视图将提供诸如
getBackButton（）
和
getForwardButton（）
等方法。然后，控制器将侦听DOM事件，而不是自定义视图事件

然而，其他人认为视图应该侦听DOM事件，控制器应该侦听视图事件（如您的示例所示）。我认为没有一种正确的做事方式。最重要的是您可以轻松（单元）测试代码；）
 接得好。谢谢，更新了。
 var HistoryManager = function(board, game) {
   Events.on('clickPrev', function() {
     var move = History.getPrev();
     if (move) {
       board.undoMove(move);
       game.turn -= 1;
       History.undo();
     }
   });

   ...