如何在 Backbone.js 中处理一个简单的点击事件？答案

【问题标题】：How to handle a simple click event in Backbone.js?如何在 Backbone.js 中处理一个简单的点击事件？
【发布时间】：2013-01-07 15:32:17
【问题描述】：

我在 Backbone 中遇到了一些非常简单的问题。我想在我的页面中连接<h1>，以便当用户单击它时，它会无缝返回到主页，而无需回发。

这是 HTML：

<h1><a id="home" href="/">Home</a></h1>

（更新：评论者建议的固定 ID。）这是我的主干视图和路由器：

var HomeView = Backbone.View.extend({
  initialize: function() { 
    console.log('initializing HomeView');
  },
  events: { 
    "click a#home": "goHome"
  }, 
  goHome: function(e) { 
    console.log('goHome');
    e.preventDefault();
    SearchApp.navigate("/");
  }
});
var SearchApp = new (Backbone.Router.extend({
  routes: { 
    "": "index", 
  },
  initialize: function(){
    console.log('initialize app');
    this.HomeView = new HomeView();
  },
  index: function(){
    // do stuff here
  },
  start: function(){
    Backbone.history.start({pushState: true});
  }
}));
$(document).ready(function() { 
  SearchApp.start();
});

控制台显示我

initialize  app
initializing HomeView

但是当我点击 <h1> 时，页面会发回 - 我在控制台中看不到 goHome。

我做错了什么？显然，我可以在 jQuery 中简单地连接<h1> click 事件，但我想了解我应该如何在 Backbone 中执行此操作。

【问题讨论】：

标签： javascript backbone.js backbone-events javascriptmvc

【解决方案1】：

如果启用 pushState，则需要拦截所有点击并阻止刷新：

$('a').click(function (e) {
  e.preventDefault();
  app.router.navigate(e.target.pathname, true);
});

类似：

$(document).ready(function(){

  var HomeView = Backbone.View.extend({
    initialize: function() { 
      console.log('initializing HomeView');
    }
  });

  var AboutView = Backbone.View.extend({
    initialize: function() { 
      console.log('initializing AboutView');
    }
  });

  var AppRouter = Backbone.Router.extend({
    routes: { 
      "": "index", 
      "about":"aboutView"
    },

    events: function () {
      $('a').click(function (e) {
        e.preventDefault();
        SearchApp.navigate(e.target.pathname, true);
      });
    },

    initialize: function(){
      console.log('initialize app');
      this.events();
      this.HomeView = new HomeView();
    },

    index: function(){
      this.HomeView = new HomeView();
    },

    aboutView : function() {
      this.AboutView = new AboutView();
    }
  });

  var SearchApp = new AppRouter();
  Backbone.history.start({pushState: true});

});

【讨论】：

我应该将点击处理程序放在主干代码中的什么位置？我知道如何在 jQuery 中编写点击处理程序，但我不知道将它放在 Backbone 的什么位置。
恐怕上面路由器代码中的Backbone.router.navigate 行给了我一个Uncaught TypeError: Cannot call method 'navigate' of undefined。我尝试将其更改为Router，但这也无济于事。最后，我将其更改为SearchApp.navigate，这并没有引发错误，但它也没有触发index 函数。认为这仍然是错误的？如果我们能让events() 正常工作，我也不清楚为什么甚至需要HomeView 视图。
你有什么版本的骨干？这是文档：backbonejs.org/#Router-navigate 哦，你需要在路由器中设置 goHome 方法，而不是视图。
是否 SearchApp.start();触发初始化（）？
谢谢。我最终使用了 Artsy 的这段代码，并将其放在您建议的位置：artsy.github.com/blog/2012/06/25/…

【解决方案2】：

您的标签id 无效，试试这个：

<h1><a id="home" href="/">Home</a></h1>

【讨论】：

谢谢 - 我已经修复了标签，但不幸的是它没有解决问题。