backbone 要点知识整理
1.backbone 是个mvc的库，官方文档说它是个库，而不是个框架。库和框架的区别就是，库只是个工具，方便你的项目应用，不会改变你的项目结构，而框架会有一套自己的机制，项目需要遵循框架的设计来实现，你要适应框架。backbone 可以当作库或者框架来用都可以。当作库，你可以只使用它的部分特性，如事件；当作框架的话，可以使用它的完整的mvc，router，history。
2.backbone的优点：a.实现了mvc结构，虽然controller里面只有router。b.可以通过事件监听，自动刷新view
backbone的缺点：a.所有的业务逻辑都在view里，view太重；b.锚点路由不利于seo
3.backbone的model，通过Backbone.sync来代理和服务器交互。也可以重写方法，把数据放到其它地方。
4.collection 也使用Backbone.sync 将一个集合状态持久化到服务器。
重写Backbone.sync 来完成自定义处理；参考ackbone.localStorage.js
Backbone.sync=function(method,model){
alert(""+method+":"+model.url);
}
var list=new Backbone.Collection();
list.url="/search";
list.fetch();
collection的fetch方法 例子
可以监听集合chang事件，集合中模型发生变化都会出发change事件
5.model和collection 都集成了undercore的部分方法，方便操作
6.事件：
a.如果你的一个页面含有大量的不同事件，我们约定使用冒号来为事件添加 命名空间 俗成地使用冒号来命名："poll:start", 或 "change:selection"
//sample1
var obj={};
_.extend(obj,Backbone.Events);
obj.on("myEvt:first",function(e){
alert("hi,and data is "+e.data);
});
obj.on("myEvt:second",function(e){
alert("hi,and data is "+e.data);
});
obj.trigger("myEvt:first",{data:"first"});
obj.trigger("myEvt:second",{data:"second"});
事件命名空间例子
//sample2
var obj={};
_.extend(obj,Backbone.Events);
obj.on("all",function(e,data){
console.log("hi,and data is "+data);
});
obj.trigger("myEvt:first","first");
obj.trigger("myEvt:second","second");
obj.trigger("test","test");
绑定all事件
b.让 object 监听 另一个（other）对象上的一个特定事件。object.listenTo(other, event, callback)
而使用这种形式的优点是：listenTo允许 object来跟踪这个特定事件，并且以后可以一次性全部移除它们。
callback 在object上下文中执行
view.listenTo(model, 'change', view.render);
结束监听事件
view.stopListening(model);
c.change:[attribute]" (model, value, options) — 当一个model（模型）的某个特定属性被更新时触发
"change:[命名空间]" 和 change:[attribute] 的区别：
"change:[命名空间]" 只是"事件:[命名空间]"的一个特例，既可以是change事件，也可以是其它事件，包括自定义事件。需要手动触发。
change:[attribute] 它会关联model的属性，当一个model（模型）的某个特定属性被更新时触发
//change:[attribute] sample:
var model=new Backbone.Model({title:'天猫',name:'商城'});
model.on('change:title',function(e){
// console.log('title changed',JSON.stringify(e));
alert('title changed:'+JSON.stringify(e));
})
model.set({title:'京东'});
//change:[命名空间] sample:
var obj={};
_.extend(obj,Backbone.Events);
obj.on("myEvt:first",function(e){
alert("hi,and data is "+e.data);
});
obj.on("myEvt:second",function(e){
alert("hi,and data is "+e.data);
});
obj.trigger("myEvt:first",{data:"first"});
obj.trigger("myEvt:second",{data:"second"});
7.
Backbone.sync 是backbone数据持久化的函数接口，用于读取和保存数据。默认情况下，它使用 jQuery.ajax 方法发送 RESTful json 请求，并且返回一个 jqXHR。 如果想采用不同的持久化方案，比如 WebSockets, XML, 或 Local Storage，我们可以重载该函数。
sync(method, model, [options])
默认 sync 映射 REST 风格的 CRUD 类似下面这样：
create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
patch → PATCH /collection/id
delete → DELETE /collection/id
model.fetch/model.save/model.destory 会通过Backbone.sync操作持久化的数据
collection.fetch/collection.create 会通过Backbone.sync操作持久化的数据
//sample
Backbone.sync = function(method, model) {
alert(method + ": " + JSON.stringify(model));
model.set('id', 1);
};
var book = new Backbone.Model({
title: "The Rough Riders",
author: "Theodore Roosevelt"
}); book.save();//create: {"title":"The Rough Riders","author":"Theodore Roosevelt"}
book.save({author: "Teddy"});//update: {"title":"The Rough Riders","author":"Teddy","id":1}
8.todo sample 分析
a.默认情况下，添加一个新的记录，会先触发model add event, 然后才会触发Backbone.sync的方法。
input new item and click enter -> collection.create->trigger collection add event -> Backbone.sync ('create')->new Store() ('create') -> localStorage.setItem()
b.可以通过设置，{wait: true} , 先触发Backbone.sync方法，然后在触发model add event. 例如：app.list.create(this.newAttributes(),{wait: true});
todo sample完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<style type="text/css">
#todoapp ul {
list-style-type: none;
list-style-type: none; /* Hides bullet points from todo list */
}
#todo-list input.edit {
display: none; /* Hides input box*/
}
#todo-list .editing label {
display: none; /* Hides label text when .editing*/
}
#todo-list .editing input.edit {
display: inline; /* Shows input text box when .editing*/
}
</style>
</head>
<body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script> <!-- <script type="text/javascript" src="backbone-localstorage.js"></script> --> <section id="todoapp">
<header id="header">
<h1>Todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
<div>
<a href="#/">show all</a> |
<a href="#/pending">show pending</a> |
<a href="#/completed">show completed</a>
</div>
</header>
<section id="main">
<ul id="todo-list"></ul>
</section>
</section> <!-- Templates -->
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= completed?'checked':'' %> />
<label><%= title %></label>
<input class="edit" value="<%- title %>">
<button class="destroy">remove</button>
</div>
</script> <script type="text/javascript">
var app={};
app.myModel=Backbone.Model.extend({
default:{
title:"",
completed:false
},
toggle: function(){
this.save({ completed: !this.get('completed')});
}
});
app.modelList=Backbone.Collection.extend({
model:app.myModel,
localStorage:new Store("backbone-todo"),
completed: function() {
return this.filter(function( todo ) {
return todo.get('completed');
});
},
remaining: function() {
return this.without.apply( this, this.completed() );
}
});
app.list=new app.modelList(); app.liview=Backbone.View.extend({
tagName:"li",
tpl:_.template($("#item-template").html()),
render:function(){
this.$el.html(this.tpl(this.model.toJSON()));
this.input=$(".edit");
return this;
},
initialize: function(){
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click label' : 'edit',
'keypress .edit' : 'updateOnEnter',
'blur .edit' : 'close',
'click .toggle': 'toggleCompleted',
'click .destroy': 'destroy'
},
edit: function(){
this.$el.addClass('editing');
this.input.focus();
},
close: function(){
var value = this.input.val().trim();
if(value) {
this.model.save({title: value});
}
this.$el.removeClass('editing');
},
toggleCompleted: function(){
this.model.toggle();
},
updateOnEnter: function(e){
if(e.which == 13){
this.close();
}
},
destroy:function(){
this.model.destroy();
}
}) app.view=Backbone.View.extend({
el:"#todoapp",
initialize:function(){
this.input=$("#new-todo");
app.list.on("add",this.addAll,this);
app.list.on("reset",this.addAll,this);
app.list.fetch();//拉取数据
},
addAll:function(){
$("#todo-list").html('');
app.list.each(this.addOne,this);
},
addOne:function(md){
var li=new app.liview({model:md});
$("#todo-list").append(li.render().el);
},
events: {
'keypress #new-todo': 'createTodoOnEnter'
},
createTodoOnEnter:function(e){
if ( e.which !== 13 || !this.input.val().trim() ) {
return;
}
app.list.create(this.newAttributes(),{wait: true});//,{wait: true}
this.input.val(''); // clean input box
},
newAttributes: function(){
return {
title: this.input.val().trim(),
completed: false
}
}
}); app.myRouter=Backbone.Router.extend({
routes:{
"":"index",
"search":"search",
"search/:id":"search"
},
index:function(){
console.log("this is home page.");
Backbone.history.stop();
},
search:function(id){
console.log("this is search page. And param is "+id);
}
});
app.router=new app.myRouter(); var helloView=new app.view();
Backbone.history.start();
</script>
</body>
</html>
todo sample
//1.collection.add(model)
//collection.add -> collection.set -> model.trigger("add") -> triggerEvents -> (ev = events[i]).callback.call(ev.ctx, a1, a2, a3) //2.listenTo
//A.listenTo(B,'click',callback) -> B.on('click',callback,A);
backbone 要点知识整理的更多相关文章
- js事件(Event)知识整理
事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下 鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...
- Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
- Kali Linux渗透基础知识整理（二）漏洞扫描
Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...
- wifi基础知识整理
转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...
- 数据库知识整理<一>
关系型数据库知识整理: 一,关系型数据库管理系统简介: 1.1使用数据库的原因: 降低存储数据的冗余度 提高数据的一致性 可以建立数据库所遵循的标准 储存数据可以共享 便于维护数据的完整性 能够实现数 ...
- 【转载】UML类图知识整理
原文:UML类图知识整理 UML类图 UML,进阶必备专业技能,看不懂UML就会看不懂那些优秀的资料. 这里简单整理 类之间的关系 泛化关系(generalization) 泛化(generalize ...
- Linux进程管理知识整理
Linux进程管理知识整理 1.进程有哪些状态?什么是进程的可中断等待状态?进程退出后为什么要等待调度器删除其task_struct结构?进程的退出状态有哪些? TASK_RUNNING(可运行状态) ...
- js事件(Event)知识整理[转]
事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄. 但很多时候我们需要绑定多个处理句柄到一个事件上 ...
- Spring Ioc知识整理
Ioc知识整理(一): IoC (Inversion of Control) 控制反转. 1.bean的别名 我们每个bean元素都有一个id属性,用于唯一标识实例化的一个类,其实name属性也可用来 ...
随机推荐
- 如何在Intellij IDEA中拉svn分支?
由于用IDEA时间也不是特别长,对操作svn的一些东西,不是特别熟悉,特此记录一下,以做备忘. 先说下流程: 在IDEA里面对trunk代码拉分支熟悉了,其实很容易, (1)你trunk目录下的得有个 ...
- 「mysql优化专题」你们要的多表查询优化来啦！请查收（4）
一.多表查询连接的选择: 相信这内连接,左连接什么的大家都比较熟悉了,当然还有左外连接什么的,基本用不上我就不贴出来了.这图只是让大家回忆一下,各种连接查询. 然后要告诉大家的是,需要根据查询的情况, ...
- CentOS中安装配置Nginx
一.安装Nginx '首先我们需要在nginx官网中下载nginx安装包,在这就下载最新版 nginx-1.13.7版本 下载完成以后我们进入下载页面进行查看 下载文件目录为 home/userNam ...
- 《重构——改善既有代码的设计》【PDF】下载
<重构--改善既有代码的设计>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196358 编辑推荐 重构,一言以蔽之,就是在不改变外 ...
- Python网络爬虫与信息提取（二）—— BeautifulSoup
BeautifulSoup官方介绍: Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式. 官方 ...
- 724. Find Pivot Index
Given an array of integers nums, write a method that returns the "pivot" index of this arr ...
- Python 多线程进程高级指南(二)
本文是如何<优雅地实现Python通用多线程/进程并行模块>的后续.因为我发现,自认为懂了一点多线程开发的皮毛,写了那么个multi_helper的玩意儿,后来才发现我靠原来就是一坨屎.自 ...
- HHVM源码剖析
一.前言 hhvm源码中充满了很多C++11的新特性,并且使用了各种设计模式如工厂,模板方法等,利用智能指针包裹指针,让delete没有肆意的出现 模板,继承,explicit,纯虚函数的出现令代码中 ...
- ArcGIS 网络分析[2.4] OD成本矩阵
什么是OD成本矩阵? 先不说这个东西是什么,我们还是举一个实际的例子: 现在存在3个城市北京.上海.武汉,请分析他们两两之间的通行时间. 很简单嘛!北京到上海,北京到武汉,上海到武汉都来一次最短路径分 ...
- bzoj 4569: [Scoi2016]萌萌哒
Description 一个长度为n的大数,用S1S2S3...Sn表示,其中Si表示数的第i位,S1是数的最高位,告诉你一些限制条件,每个条 件表示为四个数,l1,r1,l2,r2,即两个长度相同的 ...