[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 ...
随机推荐
- 第一局 ThreeJS-开始
本文介绍ThreeJS使用的大体流程.(由于水平有限,请大家多多指教.) 1.ThreeJS下载和引入: (1)下载地址:https://github.com/mrdoob/three.js/arch ...
- 安装windows7和ubuntu双系统后引导项设置
win7系统,U盘安装ubuntu,在选择[安装启动引导器的设备]时,1.如果你选择的是/dev/sda,即整个硬盘,他会将启动引导器使用grub进行系统引导,而不再使用windows loader, ...
- Thinkphp excel导入导出
挺有用处的存一下 1.去PHPexcel 官网下载最新的程序下来 ☞ 飞机在这里 我用的是1.78 放在vender 里面 在 function.php 写两个方法 路径当然是这个 ☞Commo ...
- twisted 使用
工欲善其事,必先利其器,我们先来进行 twisted 框架的安装,由于平时使用的都是 Windows 系统,那么下面我们就讲解下 Windows 下 twisted 框架的安装(1)下载 twiste ...
- Nginx 变量漫谈(五)
前面在 (二) 中我们已经了解到变量值容器的生命期是与请求绑定的,但是我当时有意避开了“请求”的正式定义.大家应当一直默认这里的“请求”都是指客户端发起的 HTTP 请求.其实在 Nginx 世界里有 ...
- [转]JSOM绘制地图区块及航道路径
From :http://support.sailstech.com/kb/c73fd2405d79911253e568ccdc69256dc7c8fb5c/josm 步驟一: 使用JOSM繪製地圖區 ...
- linux之SQL语句简明教程---IN
在 SQL 中,在两个情况下会用到 IN 这个指令:这一页将介绍其中之一 -- 与 WHERE 有关的那一个情况.在这个用法下,我们事先已知道至少一个我们需要的值,而我们将这些知道的值都放入IN 这个 ...
- uva 10382 Watering Grass_贪心
题意:给你个矩形n*m,再给你n个圆的圆心坐标和半径,问最用最少用几个圆把这个矩形覆盖 思路:直接想发现这问题不容易,后来发现可以把圆看做区间(能把矩形面积覆盖),然后这个问题就容易解决了 #incl ...
- 【Android Training UI】创建自定义Views(Lesson 1 - 创建一个View类)
发布在我的网站 http://kesenhoo.github.io/blog/2013/06/30/android-training-ui-creating-custom-views-lesson-1 ...
- [week1]每周总结与工作计划
实在不想说这句俗话,因为实在太俗了.但是俗话说,“吾日三省吾身”,我虽然难以做到每天反省那么多次,但是每周来一次就很不错了.于是我决定: 从这周开始准备每周都写每周总结与工作计划. 很好,就这样说定了 ...