今天来看下backbone的路由控制的功能。其实个人感觉backbone，模块就那么几个，熟悉它的框架结构，以及组成，就差不多。

废话不多说，我们来看看还剩下的功能。

关于路由和历史管理

通过 Backbone.Router.extend 来创建路由模型，链接到不同的指定的动作和事件.当应用已经全部链接到路由时，需利用Backbone.history.start() 或者Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由。

我们来具体的看个列子：

 //路由与历史管理

  var   Workplace  =  Backbone.Router.extend({

        routers: {

                "help" : "help" ,  //对应的调用方法  #help

                 "search/:query" : "search" ,      #search/help

                 "search/:query/p:page" : "search"  #search/query/p3

        } ,

         help : function(){

                   console.log('111');

                     //alert('111');

          },

         search : function(query , page){

                     console.log('222');

                     //alert('333');

          }

  });

  var  w = new    Workplace ;

  Backbone.history.start(); //保证路由在浏览器中有历史管理

开始创建一个自定义的路由类。当匹配了 URL 片段便执行定义的动作，并可以通过routers 定义路由动作键值对。 注意:要避免在路由定义时使用前导斜杠!!!!!

关于事件委托

什么叫事件委托呢？即事件代理，利用冒泡原理，将某一元素的事件，委托给其它元素处理的事件。

好处：提高性能  |  新添加的元素，依然保留了该事件。

    //事件委托

 $(function(){

      var   V  =  Backbone.View.extend({

            el : $('body'),   //el当前的委托人。用BODY作为委托人

            events : {        //事件

                  'click  input' : 'aaa' ,

                  'mouseover li ' : 'bbb'

            },

            aaa : function(){

                   console.log('aa');

            },

            bbb : function(){

                   console.log('bb')

            }

       });

       var    view  = new  V;

});

看下html相对应的代码：

<input type="button" value="name">

<ul>

     <li>11111111</li>

     <li>22222222</li>

     <li>33333333</li>

     <li>44444444</li>

</ul>

当点击Input时候，发生click事件，触发aaa，当鼠标移入li上时，触发bbb。

关于前端模板

好处：更好的实现mvc机制，让js的操作与试图进行分离。通常是template:_.template($('#template').html())这种写法。

 //前端模板 ：更好的让js的操作与视图进行分离

   $(function(){

          var  M = Backbone.Model.extend({

               defaults : {

                     name : '婷风'

               }

          }) ;

     //创建一个试图，listenTo比on多一个参数，改写了this指向

          var  V = Backbone.View.extend({

               initialize : function (){

                     this.listenTo(this.model , ' change' , this.show); //操作的元素 | 数据发生改变的时候，发生show事件

                },

                show : function (model){

                     $('body').append(this.template(this.model.toJSON()  )); //调用模板的方法

                },

                template : _.template($(' #template').html())

           });

           var   m  = new  M;

           var   v  = new  V({model:m});

           m.set('name' , 'jt' );

     });

html代码如下：

<div  id="template"></div>

实例演练分析

效果地址：http://www.css88.com/doc/backbone/examples/todos/index.html

下载地址：https://github.com/foreverjiangting/backbone/tree/master/examples/todos

主页html代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Backbone.js Todos</title>

  <link rel="stylesheet" href="todos.css"/>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="underscore-min.js"></script>
  <script type="text/javascript" src="backbone.js"></script>

  <script src="backbone.localStorage.js"></script>

  <script src="todos.js"></script>

</head>

<body>

  <div id="todoapp">

    <header>

      <h1>Todos</h1>

      <input id="new-todo" type="text" placeholder="What needs to be done?">

    </header>

    <section id="main">

      <input id="toggle-all" type="checkbox">

      <label for="toggle-all">Mark all as complete</label>

      <ul id="todo-list"></ul>   //包含每个li元素

    </section>

    <footer>

      <a id="clear-completed">Clear completed</a>

      <div id="todo-count"></div>

    </footer>

  </div>

  <div id="instructions">

    Double-click to edit a todo.

  </div>

  <!-- 单个li的Templates -->

  <script type="text/template" id="item-template">

    <div class="view">

      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />

      <label><%- title %></label>

      <a class="destroy"></a>

    </div>

    <input class="edit" type="text" value="<%- title %>" />   //双击li中的输入框进行编辑

  </script>

<!-- 底部的Templates -->

  <script type="text/template" id="stats-template">

    <% if (done) { %>

      <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>

    <% } %>

    <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>

  </script>

  </body>

</html>

关于backbone的js部分控制，这里不再贴码，可自行查看github 里面的官网例子，很详细的。这篇先到这里结束，之后，准备自己做点东西再贴出来。

作者：婷风

 出处：http://www.cnblogs.com/jtjds/p/5867193.html

 如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意 

转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。

backbone学习总结（二）的更多相关文章

  1. crawler4j 学习（二）

    crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...

  2. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  3. Android Animation学习（二） ApiDemos解析：基本Animators使用

    Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...

  4. AspectJ基础学习之二搭建环境（转载）

    AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...

  5. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  6. Backbone学习笔记一Backbone中的MVC

    原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. MyBatis学习系列二——增删改查

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...

  9. MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存

    目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...

  10. MyBatis学习 之 二、SQL语句映射文件(1)resultMap

    目录(?)[-] 二SQL语句映射文件1resultMap resultMap idresult constructor association联合 使用select实现联合 使用resultMap实 ...

随机推荐

  1. Java并发编程：同步容器

    Java并发编程:同步容器 为了方便编写出线程安全的程序,Java里面提供了一些线程安全类和并发工具,比如:同步容器.并发容器.阻塞队列.Synchronizer(比如CountDownLatch). ...

  2. 数据结构：顺序表（python版）

    顺序表python版的实现(部分功能未实现) #!/usr/bin/env python # -*- coding:utf-8 -*- class SeqList(object): def __ini ...

  3. 【系统架构】缓存Memcache 使用原子性操作add，实现并发锁

    原文地址 memcache中Memcache::add()方法在缓存服务器之前不存在key时, 以key作为key存储一个变量var到缓存服务器.我们使用add来向服务器添加一个键值对应,如果成功则添 ...

  4. Effective C#中文版

    我看的书是<Effective C#中文版——改善C#程序的50种方法>,Bill Wagner著,李建忠译.书比较老了,04年写的,主要针对C#1.0,但我相信其中的观点现在仍有价值.( ...

  5. 学习Javascript闭包（Closure）

    闭包作用 1.让变量驻留在内存中 2.函数外部可以读取函数内部的私有变量 <!DOCTYPE html> <html lang="en"> <head ...

  6. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. 1-1 node 基础

    1.什么是nodejs?   简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js ...

  8. entry for sde instance not found in services file解决方法[转]

    当使用如下连接: ipropertyset ppropertyset; ppropertyset = new propertysetclass(); ppropertyset.setproperty( ...

  9. UTF-8和GBK等中文字符编码格式介绍及相互转换

    我们有很多时候需要使用中文编码格式,比如gbk.gb2312等,但是因为主要针对中文编码设置,因此并不完全通用,这样一来就有了在各编码间相互转换的需求,比如和UTF8的转换.可是在我使用的过程中,却发 ...

  10. 深度技术GHOST WIN7系统32.64位j极速安装版 V2016年

    系统来自系统妈:http://www.xitongma.com 深度技术GHOST win7系统64位j极速安装版 V2016年3月 系统概述 深度技术ghost win7系统64位j极速安装版  版 ...