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?的更多相关文章

  1. 仿PC版微信的练手项目(可实时通讯)

    仿PC版微信的DEMO 本项目是由一个仿PC版微信的vue前端项目,和一个使用leancloud进行数据存储的.提供WebSocket的node后端项目构成. 本项目使用的技术栈:vue + vue- ...

  2. 使用Ant Design写一个仿微软ToDo

    实习期的第一份活,自己看Ant Design的官网学习,然后用Ant Design写一个仿微软ToDo. 不做教学目的,只是记录一下. 1.学习 Ant Design 是个组件库,想要会用,至少要知道 ...

  3. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  4. linux常用终端指令+如何用vim写一个c程序并运行

    在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...

  5. Backbone.js学习之Backbone.View(视图)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  6. JS入门学习,写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  7. JS入门学习,写一个简单的图片库

    <!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 .  加油~~ --> <!DOCTYPE html>                         ...

  8. javascript如何用递归写一个简单的树形结构

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {&qu ...

  9. (网页)javascript如何用递归写一个简单的树形结构

    转自博客园: 现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3 ...

随机推荐

  1. php 数组 (3) reset() end() count() current() key()

    <?php /* count()统计数组中元素的个数 reset() 把数组内部指针移动到数组第一个元素,并返回元素值 end() 把数组内部指针移动到数组最后一个元素,并返回元素值 prev( ...

  2. C++有没有string转化int的函数,怎样转换

    有两种方法1. c++中string到int的转换 1) 在C标准库里面,使用atoi: #include <cstdlib>#include <string> std::st ...

  3. 构建混合云:配置Azure site to site VPN连接(2)

    那么接下来的部分,我们开始正式配置S2S VPN: 首先配置本地网络,什么是本地网络呢?如果你在Azure上配置,本地网络意思是你自己的数据中心需要和Azure进行连接的网络段,而不是Azure上的网 ...

  4. SIEM思考

    https://securosis.com/blog/comments/understanding-and-selecting-siem-log-management-introduction/ ht ...

  5. 自己封装的一个简易的二维表类SimpleTable

    在QT中,QTableWidget处理二维表格的功能很强大(QTableView更强大),但有时我们只想让它显示少量数据(文字和图片),这时,使用QTableWidget就有点不方便了(个人感觉).所 ...

  6. Docker学习笔记之一,搭建一个JAVA Tomcat运行环境

    Docker学习笔记之一,搭建一个JAVA Tomcat运行环境 前言 Docker旨在提供一种应用程序的自动化部署解决方案,在 Linux 系统上迅速创建一个容器(轻量级虚拟机)并部署和运行应用程序 ...

  7. ubuntu 10.10配置NFS网络共享步骤

    安装好交叉编译环境arm-linux-gcc之后,就开始配置NFS网络共享,用于不同的linux主机与目标机之间文件的共享.如果是windows和linux的共享则需用samba服务. NFS(Net ...

  8. linux之SQL语句简明教程---AND OR

    在上一页中,我们看到 WHERE 指令可以被用来由表格中有条件地选取资料. 这个条件可能是简单的 (像上一页的例子),也可能是复杂的.复杂条件是由二或多个简单条件透过 AND 或是 OR的连接而成.一 ...

  9. Unity doesn't load, no Launcher, no Dash appears

    1. 重新安装 ubuntu-desktop不起作用. Enter the following commands:- Ctrl+Alt+F1 login there by user name and ...

  10. ubuntu 下添加sublime text 启动图标

    ubuntu下无快捷方式一说,如果想快速打开sublime Text,可以创建sublime text 启动图标 1. 创建空白文档 sublime.desktop,注意权限 $ vi /usr/sh ...