今天来看下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. 5G

    前世 1G 2G 3G 4G 今生  5G 推荐书籍: Gold Smith -<无线通信> David Tse -<无线通信基础> 参考:

  2. 谈一谈.net析构函数对垃圾回收的影响

    之前忘了说了 代码都是在Release模式下运行的,现在补充上. 这里说析构函数,其实并不准确,应该叫Finalize函数,Finalize函数形式上和c++的析构函数很像 ,都是(~ClassNam ...

  3. Hadoop单机伪分布式

    环境配置:Ubuntu11.10,Hadoop1.0.0 安装ssh 1 apt-get install ssh 安装rsy 1 apt-get install rsync 配置ssh免密码登录 1 ...

  4. springmvc整合mybatis框架源码 bootstrap

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

  5. (原) 2.3 Curator使用

    本文为原创文章,转载请注明出处,谢谢 Curator使用 1.jar包引入,演示版本为2.6.0,非maven项目,可以下载jar包导入到项目中 <dependency> <grou ...

  6. HTML5进阶段内联标签汇总（小篇）

    内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 ...

  7. 关于在SharePoint 2013（2010）中Javascript如何实现批量批准的自定义操作功能？

    1.概述: SharePoint 2013(包括SharePoint 2010)提供了很方便的,多选的界面,但是很多操作还是不能批量进行,比如:批准的功能.如果您要解决方案不关心代码,那么请直接联系作 ...

  8. 使用独立模式安装Sharepoint Server 2013出现创建示例数据错误的解决方案

    使用独立模式安装Sharepoint Server 2013,允许配置向导到第8步创建示例数据时,出错了! Exception: System.ArgumentException: The SDDL ...

  9. GeoEvent使用问题及解决方法整理

    假如GeoEvent的部署环境是一个典型的WebGIS架构(Portal+GIS Server),往往会遇到一些问题,例如: 问题:发布的StreamService流服务无法查看. 原因:默认发布的S ...

  10. ORA-01078: failure in processing system parameters & LRM-00109: could not open parameter file

    安装了Oracle 12C后,启动数据库的过程中出现如下错误 SQL> startup ORA-01078: failure in processing system parameters LR ...