今天来看下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. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  2. JavaScript进阶之this

    javascript的this,一个不知道究竟属于谁的东西 this是一个大利器,用好了就可以帮我们省掉很多事,然而事实上却总是让我们出错.自己就吃过很大的亏.现在咱们就来扒一扒this究竟是什么. ...

  3. 【工业串口和网络软件通讯平台(SuperIO)教程】三.二次开发流程

    1.1    二次开发流程图 1.2    引用相关组件 找到“开发包”,引用里边的相关组件.如下图: 1.3    开发设备驱动模块 1.3.1    开发发送协议驱动 继承SuperIO.Devi ...

  4. MongoDB基础入门003--使用官方驱动操作mongo,C#

    本篇先简单介绍一下,使用官方驱动来操作MongoDB.至于MongoDB原生的增删改查语句,且等以后再慢慢学习. 一.操作MongoDB的驱动主要有两个 1.官方驱动:https://github.c ...

  5. 咱小谈CLR

    1.什么是CLR CLR(Common Language Runtime)公共语言远行时,是一个可由多种编程语言使用的“远行时”.CLR的核心功能(比如内存管理.程序集加载.安全性.异常处理和线程同步 ...

  6. keleyi菜单0.1.5版本发布了

    keleyi菜单是一个让你轻松创建向上弹出菜单的jquery插件. 最新版本0.1.5增加了显示三角形的功能,当一级菜单包含有子菜单时,会在一级菜单的右侧显示一个小三角形.如图所示: 查看例子:htt ...

  7. webpack初入

    序言:前面已经倒腾了grunt.gulp.fis3,今天来通过一个例子玩玩webpack!最终预览 通过下面的例子,能够了解以下几点: 1.如何安装webpack 2.如何使用webpack 3.如何 ...

  8. 【grunt第二弹】30分钟学会使用grunt打包前端代码（02）

    前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...

  9. kail linux 虚拟机安装实录（一） 新建虚拟机

    各位晚上好. 现在开始进行kail linux 在虚拟机上的安装. 我所使用的工具如下: kail linux 2.0   x64  http://mirrors.neusoft.edu.cn/kal ...

  10. Windows系统变量

    %ALLUSERSPROFILE% : 列出所有用户Profile文件位置. %APPDATA% : 列出应用程序数据的默认存放位置. %CD% : 列出当前目录. %CLIENTNAME% : 列出 ...