今天来看下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. MSSQL 2012安装报错之0x858C001B

    之前安装 Microsoft Sql Server 2012 R2 的时候总是报这样的错误: SQL Server Setup has encountered the following error: ...

  2. eclipse报错：Failed to load the JNI shared library

    Eclipse运行时提示“Failed to load the JNI shared library /Java/jre6/bin/client/jvm.dll”的一个解决方案 因为 Eclipse ...

  3. Oracle内置函数：时间函数，转换函数，字符串函数，数值函数，替换函数

    dual单行单列的隐藏表,看不见 但是可以用,经常用来调内置函数.不用新建表 时间函数 sysdate 系统当前时间 add_months 作用:对日期的月份进行加减 写法:add_months(日期 ...

  4. Entity Framework 中的Code First 中引入数据库函数

    1,在项目中添加CodeFirstStoreFunctions包: Install-Package EntityFramework.CodeFirstStoreFunctions 2,注册注册函数,F ...

  5. 留言列表模板HTML代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. BFC总结

    图1:问题图    图2:代码    图3:解决图 问题图与解决图的区别:黄色箭头那行代码的无和有 BFC 定义 BFC(Block formatting context)直译为"块级格式化 ...

  7. iOS 多线程GCD简介

    一.简介 1.1 GCD (Grand Central Dispatch )是Apple开发的一个多核编程的解决方法. Grand 含义是“伟大的.宏大的”,Central含义“中央的”,Dispat ...

  8. 安装InfoPath 2013后 SharePoint 2010 出现 “找不到 Microsoft.Office.InfoPath, Version=14.0.0....” 的错误的解决方案

    1. 症状 您的SharePoint 2010的服务器是不是最近一直出现这个错误呢? Could not load file or assembly 'Microsoft.Office.InfoPat ...

  9. TeamCity实战（1）：准备工作

    环境: Windows Server 2008 R2 SP1(不会再有SP2,参考这里:http://www.techspot.com/news/50599-microsoft-wont-releas ...

  10. nodejs 中自定义事件

    经常看到 req.on('error', function(){...}); 这种代码. 在nodejs中,可以使用 EventEmitter来实现. 具体的关键词有如下几个: var reqEven ...