[Backbone.js]如何用backbone写一个仿网页版微信的webapp?
var Chat = Backbone.Model.extend({
idAttribute:'id',
initialize:function(options){
var users = this.get('users');
this.set('users',new Users(users));//一个聊天会话里面,可能有一个或者多个用户,这个collection是用来保存这些用户数据的,如果用户有变动,直接在此通过colleciton来做处理
this.set('messages',new Messages([]));//一个聊天会话里有多条聊天数据,这个结构是保存聊天数据保存在正确的会话里
this.get('messages').on('add',function(msg){
var user_name = this.get('users').get(msg.get('user_id')).get('name');
console.log('a new msg comming:',msg.get('msg'),' from user:',user_name);//这个事件绑定了当新消息收到的时候,如果做事情处理,这里简单地console.log,事实上会重新new一个messageView来显示这个消息
},this);
}
});
//会话集合
var Chats = Backbone.Collection.extend({
model:Chat
});
var User = Backbone.Model.extend({
});
var Users = Backbone.Collection.extend({
model:User
});
var Message = Backbone.Model.extend({
});
var Messages = Backbone.Collection.extend({
model:Message
});
var chat_source = [
{id:1,subject:'chat1',users:[1,2,3]},
{id:2,subject:'chat2',users:[1,2]},
{id:1,subject:'chat3',users:[2,3]}
];
var user_source = [
{id:1,name:'user1'},
{id:2,name:'user2'},
{id:3,name:'user3'},
];
var chats = new Chats((function(chats,users){
_.each(chats,function(chat){
chat._users = [];
_.each(chat.users,function(user_id){
_.each(users,function(user){
if(user.id === user_id){
chat._users.push(user);
return;
}
})
});
delete chat.users;
chat.users = chat._users;
delete chat._users;
});
return chats;
})(chat_source,user_source));
var msg1 = {msg:'hello',user_id:2,chat_id:2};
var msg2 = {msg:'gogo',user_id:3,chat_id:1};
//当新消息数据来的时候,处理
function new_msg(msg){
var chat_id = msg.chat_id;
var chat = chats.get(chat_id);
var msg_model = new Message(msg);
chat.get('messages').add(msg_model);
}
new_msg(msg1);
//模拟新消息来
setTimeout(function(){
new_msg(msg2);
},5000);
[Backbone.js]如何用backbone写一个仿网页版微信的webapp?的更多相关文章
- 仿PC版微信的练手项目(可实时通讯)
仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...
- 使用Ant Design写一个仿微软ToDo
实习期的第一份活,自己看Ant Design的官网学习,然后用Ant Design写一个仿微软ToDo. 不做教学目的,只是记录一下. 1.学习 Ant Design 是个组件库,想要会用,至少要知道 ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- linux常用终端指令+如何用vim写一个c程序并运行
在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...
- Backbone.js学习之Backbone.View(视图)
Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...
- JS入门学习,写一个时钟~
<!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...
- JS入门学习,写一个简单的图片库
<!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 . 加油~~ --> <!DOCTYPE html> ...
- javascript如何用递归写一个简单的树形结构
现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {&qu ...
- (网页)javascript如何用递归写一个简单的树形结构
转自博客园: 现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3 ...
随机推荐
- 解决英文版Windows程序乱码
前段时间由于工作需要装了一个英文版Windows,以至于在一些脚本和控制台程序里面处理汉字的时候总是显示乱码(比如:“???”). 在尝试了很多编码和解码的操作后,乱码问题还是没能很好的解决.后来才发 ...
- C++中的类和对象(二)
一,对象的动态建立和释放 1.什么是对象的动态建立和释放 通常我们创建的对象都是由C++编译器为我们在栈内存中创建的,我们无法对其进行生命周期的管理.所以我们需要动态的去建立该对象,因此我们需要在堆内 ...
- printf--动态指定输出格式长度
char a1[] = {'A', 'B', 'C'}; char a2[] = "world"; printf(, a1, , a2); printf("[%.*s][ ...
- MYSQL 表分区的 3 方法
背景知识: 表分区是把逻辑上同一范围的数据保存到同一个文件中,就和超市一样,把同类商品放在同一个区域,把不同的商品放在不同的地方.不同的是超市中 是根据用途分类的,表分区是根据它的取值区间来分的. 分 ...
- Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑
判断两个变量是否相等在任何编程语言中都是非常重要的功能. JavaScript 提供了 == 和 === 两种判断两个变量是否相等的运算符,但我们开始学习的时候 JavaScript 的时候,就被一遍 ...
- MEMS市场介绍
惠普第一.德州仪器第二 市场观察发展报告说,MEMS市场在2007年增长百分之九,达到70亿美元,其中前30名制造商的收入总和有56亿美元,平均增长7个百分点. 惠普(HP)打印机使用MEMS喷墨头, ...
- JVM虚拟机选项:Xms Xmx PermSize MaxPermSize区别(转)
java虽然是自动回收内存,但是应用程序,尤其服务器程序最好根据业务情况指明内存分配限制.否则可能导致应用程序宕掉. 举例说明含义:-Xms128m表示JVM Heap(堆内存)最小尺寸128MB,初 ...
- 依赖注入及AOP简述(八)——混合请求模式 .
2.3. 混合请求模式 上一节讲到了FQCN(全类名)请求模式会带来依赖定义的柔软性较差的问题,因此字符串和全类名混合的模式又应运而生了.比如刚才的Spring中的API方式声明注入点的例子就可 ...
- arm+linux 裸机环境搭建之安装工具篇(eclipse)
之前已经讲述如何安装gcc和gdb,在此不赘述! 一.所需要的软件有两个: jre-7u25-linux-i586.rpm(虚拟机) eclipse-cpp-kepler-R-linux-gtk .t ...
- 关于SQL 系统自带存储过程的使用 (一)
关于SQL,一边恐惧一边前行,战战兢兢,如履薄冰. 1.那些Maggie教我的事 因为脚本老是倒不齐全,QA某次跟我要了三次脚本,于是乎求助公司DBA. 利用SQL server本身的查询,找出最近修 ...