`
zccst
  • 浏览: 3320041 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

BackBone.js之Router

阅读更多
首先我们先看下面几个路径:
http://localhost:2746/Home/Home#help
http://localhost:2746/Home/Home#single/test1
http://localhost:2746/Home/Home#multip/test1/test2
某些人可能会认为是用来定位锚点的,但是在BackBone.js的路由中这些都是一个事件,并且还带有参数。
下面我们先定义一个路由:

1 var CustRoute = Backbone.Router.extend({
2 });
如果是没有javascript基础的人看到这串代码可能仅仅只是认为是执行一个函数而已,但是实际的功能却不是你想的那样简单。
实际的功能是新建一个类,并且这个类继承自Backbone.Router。(javascript并不存在实际意义上的类,仅仅只是通过某些技巧达到类的效果)。

然后我们继续往下,开始在这个类重写父类的方法:
1     var CustRoute = Backbone.Router.extend({
2         initialize: function () {
3             console.log("Route initialize");
4         }
5     });

在上面我们重写了父类中的initialize方法,这个方法会在实例化这个对象的时候被调用。下面我们写一段代码去实例化它:
1     $(function () {
2         new CustRoute();
3         Backbone.history.start();
4     });

这里我们还调用了 Backbone.history.start 方法,这个方法可以让我们在点击后退或者前进的时候同样会触发路由的事件。
这个时候你可以按F12看看console中是不是输出上面的字符串。

下面我们开始在其中添加路由的路径,添加的路由路径要求重写父类的routes这个对象,那么我们将上面的第一个路由路径实现:
var CustRoute = Backbone.Router.extend({
        initialize: function () {
            console.log("Route initialize");
        },
        routes: {
            "help":"helpex"
        },
        helpex: function () {
            console.log("helpex");
        }
    });
这个时候我们访问这个页面,然后在后面加上 #help 之后重新打开,然后查看console就可以看到输出的字符串了。当然你会认为这样
太鸡肋,还要手动输入,所以我们现在可以在页面中填上下面这个html标记:
1 <a href="#help" >help</a>

然后我们刷新页面,点击这个链接。可以看到 console 同样也输出了。

下面我们在路由的路径中加上参数,让触发的函数可以接收路径中的数据。我们继续添加对应的路由:
var CustRoute = Backbone.Router.extend({
        initialize: function () {
            console.log("Route initialize");
        },
        routes: {
            "": "index",
            "help": "help",
            "single/:single": "fsingle",
            "multip/:single/:multip": "fmultip"
        },
        index: function () {
            console.log("index");
        },
        help: function () {
            console.log("help");
        },
        fsingle: function (single) {
            console.log("single:" + single);
        },
        fmultip: function (single, multip) {
            console.log("multip:" + single + ":" + multip);
        }
    });
接着我们再添加如下的链接到页面中:
<div>
    <a href="#help" >help</a>
    <a href="#single/test1">single</a>
    <a href="#single/test2">single2</a>
    <a href="#multip/test1/test2">multip</a>
    <a href="#multip/test2/test3">multip2</a>
</div>
接着我们依次点击这些链接,可以看到console正确的输出了路由路径中的数据,这里要特别注意的是路由路径中的参数以 : 开头
然后跟着这个参数的名称,并且在响应这个路由的事件中的参数命名也要和路由中的名称一摸一样否则你会发现你点击链接根本
没有任何反应,同时也不会报错。
提示:如果你要用Js代码去跳转到这个路由可以使用 对象名.navigate 方法即可。
到此为止我们简单的将路由路径学习过了,下面我将继续讲解其他的。


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    backbone.js入门教程

    var AppRouter = Backbone.Router.extend({ routes: { '': 'home', 'users/:id': 'userDetail' }, home: function() { console.log('Home route activated'); }, userDetail: function(id) { console....

    Backbone.js开发秘笈源码

    - **路由器文件(Router.js)**:实现Backbone.Router类,定义路由规则并处理导航事件。 - **其他辅助文件**:可能包含工具函数、模板文件、配置文件等,它们支持核心模块的运作。 通过仔细研究这些源码,开发者...

    Backbone.js实战.zip

    Backbone.js是一款轻量级的JavaScript库,专为构建可维护性和结构化的Web应用而设计。它主要关注数据模型的管理、视图的渲染以及URL路由,为前端开发提供了强大的框架支持。本资源是关于"Backbone.js实战"的电子书,...

    《Backbone.js实战》(陶国荣)源码

    Backbone.js是一款轻量级的JavaScript库,专为构建复杂的Web应用而设计。它通过提供模型、视图、集合和路由器等概念,帮助开发者更好地组织和管理代码,实现MVC(Model-View-Controller)模式在前端的落地。陶国荣的...

    backbone.routemanager, 更好的backbone.js 项目路由管理.zip

    backbone.routemanager, 更好的backbone.js 项目路由管理 backbone.routemanager由 Tim Branyen @tbranyen 创建。向 Backbone.Router 提供缺少的特性。依赖于下划线,Backbone 和 jQuery 。 你可以使用定制配置完全...

    backbone.js underscore.js

    在实际项目中,Backbone.js依赖于Underscore.js,因为Backbone的一些功能如事件系统和模板引擎就构建在Underscore.js之上。同时,jQuery-1.10.2.js作为基础库,提供了DOM操作和Ajax请求的支持,使得开发者可以方便地...

    backbone.js.zip

    Backbone.js是一个轻量级的JavaScript库,专为构建可维护和组织良好的前端应用程序而设计。这个库的核心理念是提供模型-视图-控制器(MVC)架构模式,帮助开发者在浏览器端更好地组织代码,提高代码复用性和可扩展性...

    Developing Backbone.js Applications

    4. **路由器(Router)**:路由器是Backbone.js中的导航控制器,它将URL片段映射到应用程序的不同功能。通过监听浏览器的`hashchange`或`pushState`事件,路由器可以实现页面无刷新的导航。 5. **视图事件(Events)**...

    用Backbone.js写的小项目

    8. **模块化和组织结构**: 为了保持代码的清晰和可维护性,Backbone.js项目通常会采用模块化的方式组织代码,每个模块对应一个单独的JavaScript文件,比如Model、View、Router等。这样的组织结构使得代码更容易理解...

    前端项目-backbone.epoxy.zip

    在Backbone.js中,模型负责数据存储和业务逻辑,视图处理用户交互和UI渲染,而控制器(Router)处理页面导航和URL绑定。 5. **视图(View)**:在Backbone.Epoxy中,视图不仅负责呈现数据,还通过Epoxy绑定特性可以...

    backbone.js API文档 列子

    Backbone.js是一款轻量级的JavaScript库,专为构建可扩展的、结构化的Web应用而设计。它提供了模型-视图-控制器(MVC)架构,帮助开发者在处理复杂的数据和用户交互时保持代码的组织性和可维护性。在"backbone.js ...

    讲解JavaScript的Backbone.js框架的MVC结构设计理念

    Backbone.js是基于JavaScript的一种前端MVC框架,它的设计理念遵循了传统的模型-视图-控制器(Model-View-Controller)结构。相较于Angular.js等其他前端框架,Backbone.js显得更加轻巧,它专注于提供一组基础的工具...

    Backbone.js例子代码重构

    Backbone.js是一款轻量级的JavaScript库,专为构建复杂且结构化的Web应用而设计。它引入了模型-视图-控制器(MVC)的概念,帮助开发者更好地组织和管理前端代码。在这个“Backbone.js例子代码重构”的资源中,我们...

    用Backbone.js写的增删改查列表

    此外,Router是Backbone.js中实现页面路由的关键,它将URL片段映射到特定的函数,实现无刷新的页面导航。在增删改查列表中,路由器可以处理如“添加新条目”、“编辑条目”或“删除条目”等操作的URL,触发相应的...

    JavaScript的Backbone.js框架入门学习指引_.docx

    ### JavaScript的Backbone.js框架入门学习指引 #### 一、简介与背景 随着Web应用程序的复杂度不断提高,传统的JavaScript编程模式越来越难以满足大型项目的开发需求。为了更好地管理和组织前端代码,许多开发者...

    前端项目-backbone.stickit.zip

    在前端开发领域,Backbone.js 是一款非常受欢迎的JavaScript库,它为构建复杂且结构化的Web应用程序提供了强大的数据模型(Model)、视图(View)以及URL路由(Router)等功能。而Backbone.Stickit是Backbone.js的一个扩展...

    SPA-with-Backbone, Backbone.jsでsingle pageアプリケーションを作る方法.zip

    1. **Backbone.js框架**:Backbone.js提供了一套组织前端代码的工具,包括模型(Models)、视图(Views)、集合(Collections)以及路由器(Router)。它依赖于jQuery或Zepto库,用于DOM操作。 2. **模型-视图-控制...

    JavaScript_Application_Architecture_with_Backbone.js

    ### JavaScript Application Architecture with Backbone.js #### 一、引言 在现代Web开发中,随着用户对交互性与体验要求的不断提高,单页面应用(Single Page Application, SPA)逐渐成为主流趋势之一。在这种...

    前端项目-backbone.validation.zip

    在前端开发领域,Backbone.js 是一个非常受欢迎的JavaScript库,它为构建复杂的应用程序提供了一个轻量级的框架。Backbone.Validation 插件是针对Backbone.js设计的一个验证工具,用于帮助开发者轻松地实现对模型...

Global site tag (gtag.js) - Google Analytics