the5fire的技术博客

关注Python、Django、Vim、Linux、Web开发、团队管理和互联网--Life is short, we need Python.


14、backbone实战:webchat(三)web端开发

作者:the5fire | 标签:       | 发布:2012-04-17 10:38 p.m. | 阅读量: 8670, 8541

有了前面功能介绍以及整体详细设计 ,下面的开发就变得更有目的性了。

沿着上一篇文章的思路,我们先来把javascript模板建立起来,模板用来取代上一篇中html代码里的:

<li>
<div class="msgtitle">the5fire 2012-04-10 23:16:00</div>
<p>大家好!</p>
</li>

把它改成模板为:

<scripttype="text/template"id="item-template"><divclass="msgtitle"><%=username%><%=date%><aid="destroy">删除</a></div><p><%=content%></p></script>

其实模板的作用就是复用,里面多了一个删除的连接,主要是为了演示backbone的DELETE操作。

模板建立很容易,下面来建立页面端的实体类,这个更容易,因为上篇文章已经分析好了:

varChat=Backbone.Model.extend({urlRoot:'',defualts:{content:'',username:'',date:''},clear:function(){this.destroy();}});

没有看到我上一篇插曲文章的同学可能觉得奇怪,为什么urlRoot为空?这里再次重复一下,当model和collection一起使用的时候,或者更确切的说是一个model属于某一个collection时,collection的url将取代mode的urlRoot,但是你的urlRoot还必须存在。

顺着思路,在来看collection,其实简单的很,因为我这里的collection没有太多的动作要做:

varChatList=Backbone.Collection.extend({url:'/chat/',model:Chat});

仅此而已,是不是很简单。

然后同以前我们分析的todos一样,我们也来建立一个管理单个chat界面的类,学以致用,就是<strong>模仿--使用--发挥</strong>:

varChatView=Backbone.View.extend({tagName:'li',template:_.template($('#item-template').html()),events:{'click #destroy':'clear'},initialize:function(){_.bindAll(this,'render','remove');this.model.bind('change',this.render);this.model.bind('destroy',this.remove);},render:function(){$(this.el).html(this.template(this.model.toJSON()));returnthis;},clear:function(){this.model.clear();}});

代码不肖多说。

然后对应着,也要有一个整体的管理view:

varAppView=Backbone.View.extend({el:$('.main'),events:{"click #send":"say"},initialize:function(){_.bindAll(this,'addOne','addAll');this.nickname=this.$('#nickname');this.textarea=this.$("#content");chatList.bind('add',this.addOne);chatList.bind('reset',this.addAll);chatList.fetch();setInterval(function(){chatList.fetch({add:true});},5000);},addOne:function(chat){//页面所有的数据都来源于server端,如果不是server端的数据,不应添加到页面上
if(!chat.isNew()){varview=newChatView({model:chat});this.$(".chat_list").append(view.render().el);$('#screen').scrollTop($(".chat_list").height()+200);}},addAll:function(){chatList.each(this.addOne);},say:function(event){chatList.create(this.newAttributes());//为了满足IE和FF以及chrome
this.textarea.text('');this.textarea.val('');this.textarea.html('');},newAttributes:function(){varcontent=this.textarea.val();if(content==''){content=this.textarea.text();}return{content:content,username:this.nickname.val(),date:get_time()};}});

其中有两个地方需要注意:

1、 $('#screen').scrollTop($(".chat_list").height() + 200); 这个是为了让那个显示聊天信息的窗口滚动条始终处于最下方。</li>

2、

setInterval(function() {

            chatList.fetch({add: true});

}, 5000);

这个的意思就是,每隔5秒就到到服务器取一下数据,里面的add:true参数表示,每次取回数据之后都在原有数据上累加。

剩下需要说的就是,不用忘了初始化AppView,以及在ChatView定义的上方,实例化ChatList:

varchatList=newChatList;//ChatView定义上方
varappView=newAppView;

到这里web端的代码就构建完毕了,从上面的实现可以发现,web端和server端的交互全部通过collection中定义的url:'/chat/'来完成的。所有的CRUD操作通过POST,GET,PUT,DELETE来完成。

这篇文章就到此为止,有何疑问敬请留言。下一篇来构建服务器端。

- from the5fire.com
----EOF-----

微信公众号:Python程序员杂谈

最后两周预售价


其他分类: