今天来看下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. MVC依赖性注入概述

    MVC框架之所以如此受欢迎的原因之一就是它十分注意支持关注分离,使各个功能部件尽量能够相互独立.今天我们就来看看MVC4如何使用DI方法实现一些组件的独立,使本来结合紧密的部件,松耦合.我现在所说的对 ...

  2. 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

    [源码下载] 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null 作者:webabcd 介绍背水一战 Windows 10 之 XAML ...

  3. 疯狂Android讲义 - 学习笔记（三）

    Android的事件处理 3.1 Android提供了两套事件处理机制:基于监听的事件处理.基于回调的事件处理. 3.2 基于监听的事件处理 3.2.1 监听的处理模型  主要涉及三类对象:Event ...

  4. CAST function should support INT synonym for SIGNED. i.e. CAST(y AS INT)

      Login / Register Developer Zone Bugs Home Report a bug Statistics Advanced search Saved searches T ...

  5. SqlServer-无限递归树状图结构设计和查询

    在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...

  6. MySQL中优化sql语句查询常用的30种方法

      1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使 ...

  7. NSCopy&NSMutableCopy

    struct student { int a; float f; char c; long l; }; struct person { int a; float f; char c; long l; ...

  8. Ubuntu16.04LTS国内快速源

    一.源文件位置 备份并替换/etc/apt/sources.list的源内容: 二.更改源文件内容 sudo vi /etc/apt/sources.list deb http://mirrors.a ...

  9. .Net缓存管理框架CacheManager

    using System; using CacheManager.Core; namespace ConsoleApplication { class Program { static void Ma ...

  10. winform窗体（一）——基本属性

    一.窗体设计界面 二.部分属性 1.基本 设计中的Name:窗体类的类名 AcceptButton:窗口的确定按钮Enter CancelButton:窗口按ESC的取消按钮 2.外观 Backcol ...