(四)backbone - DEMO - 通信录
DEMO介绍
是DEMO - User List 的扩展,增加查询
大体实现
•创建Contact Model
var Contact = Backbone.Model.extend({
defaults: {
name: '小强',
email: 'walker@dead.com'
},
// validate user name
validate: function(attrs,options) {
if (attrs.name == "") {
return "what's the name?";
};
},
// for user search
filter: function(query) {
if (typeof(query) === 'undefined' || query === null || query === '') return true;
query = query.toLowerCase();
return this.get('name').toLowerCase().indexOf(query) != -1 || this.get('email').toLowerCase().indexOf(query) != -1;
}
});
•创建Contact Collection
var Contacts = Backbone.Collection.extend({
model: Contact,
localStorage: new Store('my-contacts') // 存至本地
});
•视图
- 每条联系人视图
var ContactItemView = Backbone.View.extend({
className: 'item',
template: _.template($('#tpl-item').html()),
events: {
'click': 'select'
},
initialize: function() {
_.bindAll(this, 'select'); // select方法绑定到当前对象
this.model.bind('reset', this.render, this);
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
if(this.model.view){
this.model.view.remove();
}
this.model.view = this;
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
select: function() { // 选择某个联系人
appRouter.navigate('contacts/' + this.model.cid, {
trigger: true
});
},
active: function() { // 选中状态
this.$el.addClass('active');
},
deactive: function() { // 未选中状态
this.$el.removeClass('active');
}
});
- 联系人列表视图,实现功能:
渲染列表、实例化ContactItemView、添加Contact、查询
var ContactListView = Backbone.View.extend({
className: 'sidebar',
template: _.template($('#tpl-sidebar').html()),
events: {
'click footer button': 'create', // footer 标签内的 button 标签 click 事件
'click input': 'filter',
'keyup input': 'filter'
},
initialize: function() {
_.bindAll(this, 'create', 'filter'); // 给 create,filter 函数绑定到当前对象
// model 监听事件
this.model.bind('reset', this.renderAll, this);
this.model.bind('add', this.add, this);
this.model.bind('remove', this.remove, this);
},
render: function() {
$(this.el).html(this.template());
this.renderAll();
return this;
},
renderAll: function() {
this.$(".items").empty();
this.model.each(this.renderOne, this);
this.filter();
},
renderOne: function(contact) {
var view = new ContactItemView({
model: contact
});
this.$(".items").append(view.render().el);
},
create: function() {
var contact = new Contact();
this.model.add(contact);
appRouter.navigate('contacts/' + contact.cid + '/edit', {
trigger:true
});
},
filter: function() {
var query = $('input', this.el).val();
this.model.each(function(contact, element, index, list) {
contact.view.$el.toggle(contact.filter(query));
});
},
active: function(item){
if (this.activeItem) {
this.activeItem.view.deactive();
}
this.activeItem = item;
if (this.activeItem) {
this.activeItem.view.active();
}
},
add: function(contact) {
this.renderOne(contact);
},
remove: function(contact) {
console.log(contact);
}
});
- 显示联系人信息视图,实现:
切换当前联系人,并展示
var ShowView = Backbone.View.extend({
className: 'show',
template: _.template($('#tpl-show').html()),
events: {
'click .edit': 'edit'
},
initialize: function() {
_.bindAll(this, 'edit');
},
render: function() {
if(this.item){
this.$el.html(this.template(this.item.toJSON()));
}
return this;
},
change: function(item) {
this.item = item;
this.render();
},
edit: function() {
if (this.item) appRouter.navigate('contacts/' + this.item.cid + '/edit', {
trigger: true
});
}
});
- 编辑联系人信息视图,实现:
修改保存、删除联系人
// edit usr contact view
var EditView = Backbone.View.extend({
className: 'edit',
template: _.template($('#tpl-edit').html()),
events: {
'submit form': 'submit',
'click .save': 'submit',
'click .delete': 'remove'
},
initialize: function() {
_.bindAll(this, 'submit', 'remove');
},
render: function() {
if(this.item){
this.$el.html(this.template(this.item.toJSON()));
}
return this;
},
change: function(item) {
this.item = item;
this.render();
},
submit: function() {
this.item.set(this.form());
this.item.save();
appRouter.navigate('contacts/' + this.item.cid, {
trigger:true
});
return false;
},
form: function() {
return {
name: this.$('form [name="name"]').val(),
email: this.$('form [name="email"]').val()
};
},
remove: function() {
this.item.destroy();
this.item = null;
appRouter.navigate('', {
trigger: true
});
}
});
- 主视图,联系人展示、编辑管理视图
实例化展示视图、编辑视图;切换展示视图、编辑视图
var MainView = Backbone.View.extend({
className: 'main stack',
initialize: function() {
this.editView = new EditView();
this.showView = new ShowView();
},
render: function() {
this.$el.append(this.showView.render().el);
this.$el.append(this.editView.render().el);
return this;
},
edit: function(item) {
this.showView.$el.removeClass('active');
this.editView.$el.addClass('active');
this.editView.change(item);
},
show: function(item) {
this.editView.$el.removeClass('active');
this.showView.$el.addClass('active');
this.showView.change(item);
}
});
- 总页面视图:
实例化列表视图、主视图
var AppView = Backbone.View.extend({
className: 'contacts',
initialize: function() {
this.contactList = new ContactListView({
model: this.model
});
this.main = new MainView();
this.vdiv = $('<div />').addClass('vdivide');
this.model.fetch();
this.render();
},
render: function() {
this.$el.append(this.contactList.render().el);
this.$el.append(this.vdiv);
this.$el.append(this.main.render().el);
$('#article').append(this.el);
return this;
},
show: function(item){
this.contactList.active(item);
this.main.show(item);
},
edit: function(item){
this.contactList.active(item);
this.main.edit(item);
}
});
•路由
dolymood.contacts = new Contacts();
dolymood.appView = new AppView({
model:dolymood.contacts
});
dolymood.AppRouter = Backbone.Router.extend({
routes: {
'': 'show',
'contacts/:id': 'show',
'contacts/:id/edit': 'edit'
},
show: function(id) {
if(id !== undefined){
dolymood.appView.show(this.getContact(id));
}
else {
dolymood.appView.show(dolymood.contacts.first());
}
},
edit: function(id) {
if(id !== undefined){
dolymood.appView.edit(this.getContact(id));
}
},
getContact: function(id) {
return dolymood.contacts.get(id);
}
});
注:v1.1.2 版本的Backbone.Collection,使用get函数,传入cid来获取model实例
•路由启动
var appRouter = new dolymood.AppRouter();
Backbone.history.start();
•html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Backbone通讯录</title>
<link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
</head>
<body>
<header id="header"><h1>Backbone通讯录</h1></header>
<article id="article"></article>
</body>
<script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/backbone.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/backbone-localstorage.js" type="text/javascript" charset="utf-8"></script> <!-- 联系人 -->
<script type="text/template" id="tpl-item">
<%= (name ? name : "<i>无名</i>") %>
</script> <!-- 左边的侧边条,包括联系人列表 -->
<script type="text/template" id="tpl-sidebar">
<header>
<input type="search" placeholder="搜索" results="0" incremental="true" autofocus>
</header>
<div class="items"></div>
<footer>
<button>新建联系人</button>
</footer>
</script> <!-- 显示联系人详细信息 -->
<script type="text/template" id="tpl-show">
<header>
<a class="edit">编辑</a>
</header>
<div class="content">
<p><label>姓名:<%= name %></label></p>
<p><label>邮箱:<%= email %></label></p>
</div>
</script> <!-- 编辑联系人信息 -->
<script type="text/template" id="tpl-edit">
<header>
<a class="save">保存</a>
<a class="delete">删除</a>
</header>
<div class="content">
<form>
<label>
<span>姓名:</span>
<input type="text" name="name" value="<%= name %>">
</label>
<label>
<span>邮箱:</span>
<input type="email" name="email" value="<%= email %>">
</label>
<button>保存</button>
</form>
</div>
</script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</html>
(四)backbone - DEMO - 通信录的更多相关文章
- (五)backbone - DEMO - 通信录改造之使用requirejs
DEMO介绍是 DEMO通信录的扩展,使用requirejs模块化整合 大体实现 • model文件 model/contact.js define(function (){ // user cont ...
- 今天研究了一下手机通信录管理系统(C语言)
题目:手机通信录管理系统 一.题目要求 二.需求分析 三.设计步骤/编写代码 四.上机/运行结果 五.总结 一.题目要求 模拟手机通信录管理系统,实现对手机中的通信录进行管理操作.功能要求: (1)查 ...
- MVVM与Backbone demo
MVVM https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
- 非智能手机通信录备份并还原至Android智能手机方法
随着智能手机早已深入普通用户的生活,2-3线城市的用户也逐渐从使用非智能机换成使用智能机.最近便遇见了这样一个转移通讯录的需求.之前使用的手机型号是BBK K201,通信录中绝大部分保存在了手机中,最 ...
- [老老实实学WCF] 第四篇 初探通信--ChannelFactory
老老实实学WCF 第四篇 初探通信--ChannelFactory 通过前几篇的学习,我们简单了解了WCF的服务端-客户端模型,可以建立一个简单的WCF通信程序,并且可以把我们的服务寄宿在IIS中了. ...
- (转)[老老实实学WCF] 第四篇 初探通信--ChannelFactory
第四篇 初探通信--ChannelFactory 通过前几篇的学习,我们简单了解了WCF的服务端-客户端模型,可以建立一个简单的WCF通信程序,并且可以把我们的服务寄宿在IIS中了.我们不禁感叹WCF ...
- 管理Android通信录
Android提供了Contacts应用程序来管理联系人,并且Android系统还为联系人管理提供了ContentProvider,这就同意其他应用程序以ContentResolver来管理联系人数据 ...
- Java进阶(四十七)Socket通信
Java进阶(四十七)Socket通信 今天讲解一个 Hello Word 级别的 Java Socket 通信的例子.具体通讯过程如下: 先启动Server端,进入一个死循环以便一直监听某端口是 ...
- 通信录列表+复杂Adapter分析
概述 最近写论文之余玩起了github,发现有个citypicker挺不错的,高仿了美团城市选择和定位的一些功能 地址链接 效果图如下: 自己手动写了一遍优化了一些内容,学到了一些姿势,下面对其中一些 ...
随机推荐
- linux笔记2.19
压缩一般使用 tar -cvzf etcbackup.tar.gz /etc 寻找文件 locate(快速查找:新添加的得用updatedb更新后才能找到) find: find . -name ...
- 3.3.2 嵌入汇编(摘自<linux内核完全剖析>)
内核C语言程序嵌入式汇编代码又叫内联汇编,具有输入和输出参数的嵌入汇编语句的基本格式为: ************************************************** asm( ...
- 汉诺塔 Hanoi Tower
电影<猩球崛起>刚开始的时候,年轻的Caesar在玩一种很有意思的游戏,就是汉诺塔...... 汉诺塔源自一个古老的印度传说:在世界的中心贝拿勒斯的圣庙里,一块黄铜板上插着三支宝石针.印度 ...
- 操作css样式
<script type="text/javascript"> //产生一个四位的验证码. function createCode(){ var datas = ['A ...
- Open Wifi SSID Broadcast vulnerability
Open Wifi SSID Broadcast vulnerability 0x00 前言 前几天,看到微博上@RAyH4c分享了一份老外关于wifi钓鱼的文章,觉得挺好的,便翻译了一下.第一次翻译 ...
- COJ 0557 4013多重部分和问题
4013多重部分和问题 难度级别:B: 运行时间限制:2000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 n种大小不同的数字 Ai,每种各Mi个,判断是否可以从 ...
- Linux系统编程(32)—— socket编程之TCP服务器与客户端
TCP协议的客户端/服务器程序的一般流程 服务器调用socket().bind().listen()完成初始化后,调用accept()阻塞等待,处于监听端口的状态,客户端调用socket()初始化后, ...
- 【转】android中如何查看某个线程的logcat--不错
原文网址:http://my.oschina.net/u/236164/blog/51022 单一个项目由很多人开发,然后大家各自打各自的log.到最后logcat就根本没法看了. adb自带的参数里 ...
- 5s
整理,整顿,清楚,清洁,身美
- html基础知识总结2
下拉列表,文本域,复选框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...