14、backbone实战:webchat(三)web端开发
有了前面功能介绍以及整体详细设计 ,下面的开发就变得更有目的性了。
沿着上一篇文章的思路,我们先来把javascript模板建立起来,模板用来取代上一篇中html代码里的:
<div class="msgtitle">the5fire 2012-04-10 23:16:00</div>
<p>大家好!</p>
</li>
把它改成模板为:
<div class="msgtitle">
<%=username %> <%=date %><a id="destroy">删除</a>
</div>
<p><%=content %></p>
</script>
其实模板的作用就是复用,里面多了一个删除的连接,主要是为了演示backbone的DELETE操作。
模板建立很容易,下面来建立页面端的实体类,这个更容易,因为上篇文章已经分析好了:
urlRoot:'',
defualts: {
content:'',
username:'',
date:''
},
clear: function(){
this.destroy();
}
});
没有看到我上一篇插曲文章的同学可能觉得奇怪,为什么urlRoot为空?这里再次重复一下,当model和collection一起使用的时候,或者更确切的说是一个model属于某一个collection时,collection的url将取代mode的urlRoot,但是你的urlRoot还必须存在。
顺着思路,在来看collection,其实简单的很,因为我这里的collection没有太多的动作要做:
url:'/chat/',
model:Chat
});
仅此而已,是不是很简单。
然后同以前我们分析的todos一样,我们也来建立一个管理单个chat界面的类,学以致用,就是模仿–使用–发挥:
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:
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:
//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端开发相关推荐
- 前端系列——vue2+高德地图web端开发(poi搜索两种方式)
前端系列--vue2+高德地图web端开发(poi搜索) 前言 基础 什么是poi搜索 1. 输入提示结合poi搜索 官方代码 步骤 1.进行plugins插件注册 2.data中编写placeSea ...
- 前端系列——vue2+高德地图web端开发(行政区边界绘制)
vue2+高德地图web端开发(行政区边界绘制) 前言 原理 基础 实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
- 前端系列——vue2+高德地图web端开发(使用和引入)
vue2+高德地图web端开发(使用和引入) 前言 基础 准备工作 高德地图的个人开发者注册 高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加 高德 2.0 新增 ...
- web端开发规范开发规范_Web开发人员的规范工作
web端开发规范开发规范 As a company edgeofmyseat.com don't need to do a lot of responding to tenders. We somet ...
- 百度LBS地图的Web端开发实战
百度地图API以开放形式提供给开发者,完全免费,可以直接使用,无需商业授权. 这次教程我们主要讲解百度地图的地图展示.本地检索.逆/地理编码.覆盖物.城市列表等关键功能. 0.效果图展示 介绍一下: ...
- 手机客户端和web端开发的异同
2019独角兽企业重金招聘Python工程师标准>>> 版本升级.用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而web的升级无需用户做任何事情.开发角度上看,如 ...
- 好嗨哟 之 Mac OS 搭建 Eclipse + Tomcat + Maven Web 端开发环境。。。
LZ-Says:是过往云烟,还是回眸一笑,自在人心. 前言 从上周三临近下班时,接收到接下来要开发接口. 回归 Java 莫名的兴奋,多少还是有点不舍,不过多掌握几门,还是比较不错的. 至少相比曾经的 ...
- 手机消息推送之web端开发
最近的项目APP端需要添加消息推送任务.于是果断选择了极光消息推送.最最重要的原因就是开源免费. 极光开发者服务官网:https://www.jiguang.cn/
- Skyline WEB端开发3——添加一个弹框
相对于之前的功能而言,弹出弹框就比较容易了,在skyline中有提供Window, 包含所有与三维窗口互动的相关功能. 创建弹窗的方法 Creator.CreatePopupMessage Creat ...
最新文章
- FreeType简介及在vs2010的编译使用
- 耗时三小时整理的机器视觉知识-建议收藏转发
- Mac OS 系统重装U盘制作(DiskMaker X)
- 华为荣耀手机指令代码大全_双十二,华为/荣耀手机推荐选购指南,全系列横评推荐,那一款华为/荣耀手机最值得够买...
- 团队章程---促进团队更合作和更高效
- Mysql - Binlog
- Linux Kernel ‘install_user_keyrings()’竞争条件漏洞
- SQL查询中having和where的异同点
- AMD宣布350亿美元收购赛灵思,CPU、GPU、FPGA全凑齐
- mysql之index
- 使用Aop管理所有Valid结构bindingResult
- CCF认证2014-9-2 画图
- Tensorflow 2.x代码中如何控制随机性以保证结果可重复性
- Docker系列教程27-在生产环境中使用Docker Compose
- Java多线程并发编程实践总结
- fileZilla服务器登录密码展示
- c#获取当前日期时间
- Java网络编程 Socket、ServerSocket 详解,方法介绍及完整代码示例
- Vue之Axios AJAX封装
- (WPF)连锁超市收银系统总结