Backbone.js 是一个轻量级 JavaScript 库，用于创建单页应用程序。它提供了一套 MVC 模式的框架，使开发人员可以更好地组织和管理他们的代码。
在使用 Backbone.js 开发单页应用程序时，通常需要将用户导航到不同的页面或视图。本文将介绍如何在 Backbone.js 视图上监听“click”事件，并从该事件中导航到一个新的路由。
监听视图上的 “click” 事件
首先，在 Backbone.js 视图中监听 “click” 事件。这可以通过以下方式完成：
var MyView = Backbone.View.extend({
events: {
"click .my-element": "navigate"
},
navigate: function() {
// Code to navigate to a new route
}
});在这个示例中，“.my-element”是目标元素的 jQuery 选择器。当用户点击此元素时，navigate() 方法将被调用。
导航到新的路由
接下来，我们需要编写代码以实现在 navigate() 方法中导航到一个新的路由。
在 Backbone.js 中，可以使用 Backbone.Router.navigate() 方法导航到一个新的路由。例如：
-- -------------------- ---- -------
--- -------- - ------------------------
------- -
------ ------
------ -----
--
---- ---------- -
---------------- --------
--
---- ---------- -
---------------- --------
-
---
--- -------- - --- -----------
-------------------------
--- ------ - ----------------------
------- -
------ ------------- ----------
--
--------- ---------- -
------------------------ --------- -------
-
---
--- ------ - --- ----------- ----------------在这个示例中，我们创建了一个包含两个路由的 MyRouter，它们分别匹配路径 “foo” 和 “bar”。当用户单击 MyView 的 .my-element 元素时，navigate() 方法将调用 myRouter.navigate("foo", {trigger: true})，这会导航到路径 “foo”，并触发相应的回调函数。
总结
通过以上步骤，我们可以在 Backbone.js 视图上监听 “click” 事件，并在该事件中导航到一个新的路由。这种技术可用于实现单页应用程序中的导航和页面切换等功能。
请注意，在使用 Backbone.js 开发时，需要遵循一些最佳实践，例如将代码合理组织和管理，使用模块化开发等。这样可以提高代码的可维护性和扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29119