[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);
相關文章
相關標籤/搜索