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

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

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

把它改成模板为:

<script type="text/template" id="item-template">

<div class="msgtitle">
      <%=username %> <%=date %><a id="destroy">删除</a>
   </div>
   <p><%=content %></p>

</script>

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

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

var Chat = Backbone.Model.extend({

urlRoot:'',

defualts: {
            content:'',
            username:'',
            date:''
        },

clear: function(){
            this.destroy();
        }
    });

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

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

var ChatList = Backbone.Collection.extend({

url:'/chat/',

model:Chat

});

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

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

var ChatView = 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()));
            return this;
        },

clear: function(){
            this.model.clear();
        }
    });

代码不肖多说。

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

var AppView = 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()) {  
                var view = new ChatView({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() {

var content = 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); 这个是为了让那个显示聊天信息的窗口滚动条始终处于最下方。
  • 2、
    setInterval(function() {

    chatList.fetch({add: true});

    }, 5000);

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

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

var chatList = new ChatList;

//ChatView定义上方

var appView = new AppView;

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

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

本文链接: http://www.the5fire.com/14-backbone-webchat3.html

14、backbone实战:webchat(三)web端开发相关推荐

  1. 前端系列——vue2+高德地图web端开发(poi搜索两种方式)

    前端系列--vue2+高德地图web端开发(poi搜索) 前言 基础 什么是poi搜索 1. 输入提示结合poi搜索 官方代码 步骤 1.进行plugins插件注册 2.data中编写placeSea ...

  2. 前端系列——vue2+高德地图web端开发(行政区边界绘制)

    vue2+高德地图web端开发(行政区边界绘制) 前言 原理 基础 实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...

  3. 前端系列——vue2+高德地图web端开发(使用和引入)

    vue2+高德地图web端开发(使用和引入) 前言 基础 准备工作 高德地图的个人开发者注册 高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加 高德 2.0 新增 ...

  4. web端开发规范开发规范_Web开发人员的规范工作

    web端开发规范开发规范 As a company edgeofmyseat.com don't need to do a lot of responding to tenders. We somet ...

  5. 百度LBS地图的Web端开发实战

    百度地图API以开放形式提供给开发者,完全免费,可以直接使用,无需商业授权. 这次教程我们主要讲解百度地图的地图展示.本地检索.逆/地理编码.覆盖物.城市列表等关键功能. 0.效果图展示 介绍一下: ...

  6. 手机客户端和web端开发的异同

    2019独角兽企业重金招聘Python工程师标准>>> 版本升级.用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而web的升级无需用户做任何事情.开发角度上看,如 ...

  7. 好嗨哟 之 Mac OS 搭建 Eclipse + Tomcat + Maven Web 端开发环境。。。

    LZ-Says:是过往云烟,还是回眸一笑,自在人心. 前言 从上周三临近下班时,接收到接下来要开发接口. 回归 Java 莫名的兴奋,多少还是有点不舍,不过多掌握几门,还是比较不错的. 至少相比曾经的 ...

  8. 手机消息推送之web端开发

    最近的项目APP端需要添加消息推送任务.于是果断选择了极光消息推送.最最重要的原因就是开源免费. 极光开发者服务官网:https://www.jiguang.cn/

  9. Skyline WEB端开发3——添加一个弹框

    相对于之前的功能而言,弹出弹框就比较容易了,在skyline中有提供Window, 包含所有与三维窗口互动的相关功能. 创建弹窗的方法 Creator.CreatePopupMessage Creat ...

最新文章

  1. FreeType简介及在vs2010的编译使用
  2. 耗时三小时整理的机器视觉知识-建议收藏转发
  3. Mac OS 系统重装U盘制作(DiskMaker X)
  4. 华为荣耀手机指令代码大全_双十二,华为/荣耀手机推荐选购指南,全系列横评推荐,那一款华为/荣耀手机最值得够买...
  5. 团队章程---促进团队更合作和更高效
  6. Mysql - Binlog
  7. Linux Kernel ‘install_user_keyrings()’竞争条件漏洞
  8. SQL查询中having和where的异同点
  9. AMD宣布350亿美元收购赛灵思,CPU、GPU、FPGA全凑齐
  10. mysql之index
  11. 使用Aop管理所有Valid结构bindingResult
  12. CCF认证2014-9-2 画图
  13. Tensorflow 2.x代码中如何控制随机性以保证结果可重复性
  14. Docker系列教程27-在生产环境中使用Docker Compose
  15. Java多线程并发编程实践总结
  16. fileZilla服务器登录密码展示
  17. c#获取当前日期时间
  18. Java网络编程 Socket、ServerSocket 详解,方法介绍及完整代码示例
  19. Vue之Axios AJAX封装
  20. (WPF)连锁超市收银系统总结

热门文章

  1. ios IPad全局禁止横屏设置
  2. 【产品】支付宝蚂蚁森林产品体验报告
  3. 【HZHT001】黄子涵学习Typescript
  4. C++ auto类型用法总结
  5. 快速将AI转换为PNG,JPG,PSD和PDF!你可以试试它
  6. Akamai发布《互联网现状》报告,亚太恶意DNS攻击剧增
  7. 微信小程序的框架构造及应用
  8. 数据可视化Echarts使用
  9. 再见了,惠普......
  10. 前世的500次回眸、才换来今生的擦肩而过