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属性也可用来 ...
随机推荐
- jdk动态代理举例
JDK动态代理是基于接口的代理,下面举例说明 代理类:proxy,代理动作必须要基于一个proxy实例来执行 代理执行类:实现InvocationHandler,案例中是TestInvocationH ...
- Web前端开发好学吗？谈谈一位学姐的前端工程师之路
我的第一篇博客....... 我是一名工科女,因高考失利与理想的院校擦肩而过,从而选择了机电专业.毕业后找工作时才发现机电专业的工作并不太适合我.我的父母也支持我转专业求职,但这个过程有时会让我迷茫. ...
- 微信小程序——微信支付
这个讲起来也就比较麻烦一点,因为需要的不仅仅是咱们代码上的技术,嘿嘿! 先整理一下思路.如果想做微信支付: 1.现有一个公司账户(非个人账户),并且实名认证过的. 2.微信号 必须开通微信支付功能. ...
- 微信小程序教学第二章：小程序中级实战教程之预备篇 - 项目结构设计 ｜基于最新版1.0开发者工具
iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...
- 栈stack（1）：栈的数组实现
定义 栈(stack),是一个只允许在表尾端进行删除插入操作的线性表,是一种后进先出(LIFO,last in first out)的数据结构. 因此,对于栈来说,我们规定进行删除插入操作的表尾端称为 ...
- C++ 头文件系列(iomanip)
1. 简介 该头文件定义了一些参数化的操纵器(manipulatators),注意ios头文件也定义了一些. 2. maniapulators 2.1 C++98 resetiosflags : 重置 ...
- ubuntu16.04 查询ip,网关，dns信息
用ifconfig命令只能查询ip,子网掩码信息,不能获取dns和网关信息 用下面命令即可查询 nmcli dev show
- Pashmak and Flowers
Pashmak decided to give Parmida a pair of flowers from the garden. There are nflowers in the garden ...
- HTML5 给图形绘制阴影(绘制五角星示例)
几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...
- userdel 命令详解
userdel 作用: 删除指定用户,以及用户相关的文件. 如不加选项,则仅删除用户账号,而不删除相关文件 选项: -f:强制删除用户,即时用户当前已登录 -r:删除用户的同时删除与用户相关的所有文 ...