backbone学习总结（二）

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

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

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

转载于:https://www.cnblogs.com/jtjds/p/5867193.html

backbone学习总结（二）相关推荐

语义分割：基于openCV和深度学习（二）
语义分割:基于openCV和深度学习(二) Semantic segmentation in images with OpenCV 开始吧-打开segment.py归档并插入以下代码: Semanti ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
Mybatis底层原理学习（二）：从源码角度分析一次查询操作过程
在阅读这篇文章之前,建议先阅读一下我之前写的两篇文章,对理解这篇文章很有帮助,特别是Mybatis新手: 写给mybatis小白的入门指南 mybatis底层原理学习(一):SqlSessionFac ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
Membership学习（二）membership入门
Membership学习(二)membership入门 --不写一行代码在asp.net中实现用户验证管理系统这篇文章我们将实现一个简单的网站,在网站中实现用户的身份验证,创建用户,修改密码还有限 ...
appium学习【二】：用try捕获异常后，用例的执行结果为pass
appium学习[二]:用try捕获异常后,用例的执行结果为pass 参考文章: (1)appium学习[二]:用try捕获异常后,用例的执行结果为pass (2)https://www.cnblog ...
PyTorch学习笔记(二)——回归
PyTorch学习笔记(二)--回归本文主要是用PyTorch来实现一个简单的回归任务. 编辑器:spyder 1.引入相应的包及生成伪数据 import torch import torch.nn ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
Maven学习总结(二)——Maven项目构建过程练习
2019独角兽企业重金招聘Python工程师标准>>> Maven学习总结(二)--Maven项目构建过程练习上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验 ...
Scapy学习笔记二
Scapy学习笔记二 Scapy Sniffer的用法: http://blog.csdn.net/qwertyupoiuytr/article/details/54670489 Scapy Snif ...

backbone学习总结（二）

backbone学习总结（二）相关推荐

最新文章

热门文章