backbonejs mvc框架的增删查改实例
一:开发环境
coffeescript和nodejs需要先安装,没装网上自己查安装步骤。
代码编写环境及esp框架下载:
esp框架下载地址:https://github.com/nonocast/esp.git
在下载目录执行安装命令:npm install esp
这样开发环境就已经安装好了。
二:backbonejs 增删查改实例代码
backbonejs的学习可以网上下载电子书“backbonejs的入门教程”,及http://backbonejs.org/官网上学习
1:html部分
结构是由一个编辑模版和一个table行模版组成。
body ->
div 'header', -> 'BACKBONEJS MVC DEMO'
div 'add-block', ->
input type:'button',id:'addbtn',value:'添加'
span id: "showblock", style:'display:none;', ->
text '姓名:'
input type:text,id:'a-name'
text '性别:'
input type:text,id:'a-gender'
text '科目:'
input type:text,id:'a-subject'
text '成绩:'
input type:text,id:'a-score'
input type:'button',id:'savebtn',value:'保存'
table ->
caption '学生成绩汇总列表'
tr ->
th style:'width:10%;', -> '编号'
th style:'width:15%;', -> '姓名'
th style:'width:15%;', -> '性别'
th style:'width:15%;', -> '科目'
th style:'width:15%;', -> '成绩'
th style:'width:20%;', -> '操作'
script type:'text/template',id:'trtemplate', ->
tr 'tr<%=id%>', ->
td 'id<%=id%>', -> '<%=id%>'
td 'name<%=id%>', -> '<%=name%>'
td 'gender<%=id%>', -> '<%=gender%>'
td 'subject<%=id%>', -> '<%=subject%>'
td 'score<%=id%>', -> '<%=score%>'
td 'do', ->
a id:'tredit<%=id%>', href:'#',->'编辑'
a id:'trdelete<%=id%>', href:'#',->'删除' script type:'text/template',id:'edittemplate', ->
tr 'tr<%=id%>', ->
td 'id', ->'<%=id%>'
td 'name', ->
input 'name<%=id%>',type:'text',value:'<%=name%>'
td 'gender', ->
input 'gender<%=id%>',type:'text',value:'<%=gender%>'
td 'subject', ->
input 'subject<%=id%>',type:'text',value:'<%=subject%>'
td 'score', ->
input 'score<%=id%>',type:'text',value:'<%=score%>'
td 'do', ->
a id:'save<%=id%>', href:'#',->'确认'
2:js mvc框架部分
M---model(类结构)
C----collection(数据集合)
V----View(页面级别的,与页面绑定,事件的绑定等)
Model的defaults可以是一些默认的类型结构,也可以什么默认结构都没有,自己在使用过程中定义类型结构,在Model模块中主要是为了某个属性发生变化时触发所绑定的事件功能。
在Collection模块中,url主要是与后台交互的接口,所有的数据交互都通过此url,提交的数据带有id的此框架会自动转为PUT协议, 没有id的新增数据为Post协议,挺奇怪的吧
model表明该Collection是上面$model类型结构的集合
View模块中,el:表明该页面级要操作的元素的区域,最大也就为body了。在view中操作的元素都需要包含在此el中,有点象作用域
events:此处元素事件绑定,注:此处绑定的事件需要涉及的dom元素在执行到该处时就已经载入,比如模块中的编辑删除按钮就不能在这里绑定事件,因为这些按钮在view初始化后的构造函数中render才呈现出来,此时绑定会找不到这些元素。
that = @ @为this指针,this指向当前的view,在很多地方用到该句来备份指针,目的是在单击等事件里的指针会发生变化,会指向当前的元素,用that以便能调用view内定义的方法.
新增一条记录时,需要手动加入到collection里面,再提交到后台,可以用collection.create新增记录,也可以通过model来创建一条记录,然后手动添加到collection,此时需要走model的url来save,而不是collection的url来save,如下:
saveclick: ->
that = @ #此处的备份指针,以便能调用view内定义的方法,在单击等事件里的指针会发生变化,指向当前的元素
#n =new $model 通过model创建的数据保存到后台之后(需要走model里的url到后台),需要在collection手动加入该条记录,而通过collction先创建这条记录(走collection
#的url到后台),不需要再手动添加
@collection.create {name:$("#a-name").val(), gender:$("#a-gender").val(),subject:$("#a-subject").val(),score:$("#a-score").val()},
success:(mod,res) ->
e = _.template $("#trtemplate").html()
$("table").append(e mod.attributes)
i = mod.get "id"
$("#tredit"+i).click ->
that.editclick i
$("#trdelete"+i).click ->
that.deleteclick i
$("#showblock").css("display","none")
error: ->
alert 'error'
三:esp后台代码
esp = require 'esp'
esp.route ->
data = []
data.push {id:1,name:'测试1',gender:'male',subject:'语文',score:'80'}
data.push {id:2,name:'测试2',gender:'male',subject:'数学',score:'90'}
data.push {id:3,name:'测试3',gender:'male',subject:'英语',score:'88'}
data.push {id:4,name:'测试4',gender:'male',subject:'语文',score:'70'}
data.push {id:5,name:'测试5',gender:'male',subject:'数学',score:'90'} @get '/', ->@view 'home' @get '/data', -> @json data @post '/data', ->
i = data[data.length-1].id+1
model = {}
d = ''
@request.on 'data',(chunk) -> d += chunk
@request.on 'end', =>
obj = JSON.parse d
console.log obj
model = {id:i,name:obj.name,gender:obj.gender,subject:obj.subject,score:obj.score}
data.push model
@json model @delete '/data/:id', ->
for each, i in data
if each.id.toString() is @id
data.splice i,1
@json id:@id @put '/data/:id', ->
d = ''
@request.on 'data',(chunk) -> d += chunk
@request.on 'end', =>
obj = JSON.parse d
console.log obj.name
for each, i in data
if each.id == obj.id
each.name = obj.name
each.gender = obj.gender
each.subject = obj.subject
each.score = obj.score
@json each
四:实现页面效果
以上实现了一个简单增删改的实例,练习了backbonejs mvc框架的使用。有些描述是自己的理解,有不正确的地方望大伙指正。
backbonejs mvc框架的增删查改实例的更多相关文章
- SSH2 增删查改实例
(一)引入包 (共73个,不一定都需要,但是我的项目是这么多,经过调试,没有包冲突) (二)创建数据库表 建立数据库octtest,并创建user表,表里面一共4个字段:id,姓,名,年龄. 语句如下 ...
- (新)自己动手写ORM框架(1)-增删查改的使用
之前写过一个系列文章自己动手写ORM框架,经过在多个项目的中的使用,对这套代码进行了许多改进,下面是使用方法: 新增学员信息代码预览: DBHelper db = DBHelper.getInstan ...
- [转].NET MVC 分页以及增删查改
本文转自:http://blog.csdn.net/sust2012/article/details/30761867 . 数据库操作,DAL 层: using System; using Syste ...
- Yii框架基础增删查改
返回一条数据 Country::find()->one(); 返回所有数据 Country::find()->all(); 返回记录的数量 $country =Country::find( ...
- elasticsearch的python增删查改实例分析
Reference: http://bigg.top/2015/11/29/elasticsearch%E7%9A%84python%E5%A2%9E%E5%88%A0%E6%9F%A5%E6%94 ...
- backbonejs mvc框架
backbonejs mvc框架的增删查改实例 一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https ...
- 6.在MVC中使用泛型仓储模式和依赖注入实现增删查改
原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...
- knockout+MVC+webapi+sqlserver完成增删查改
快过年了,公司的事情较少,想着开始学习点新东西.这段时间一个项目用到了mvc和webapi,然后一直对knockout比较感兴趣,就想着用这个框架做一个小实例.数据库采用的是sqlserver.话不多 ...
- 在MVC中使用泛型仓储模式和依赖注入实现增删查改
标签: 原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository ...
随机推荐
- 不要温柔地走入promise
第一步 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- C#线程系列讲座(5):同步技术之Monitor
在上一讲介绍了使用lock来实现线程之间的同步.实际上,这个lock是C#的一个障眼法,在C#编译器编译lock语句时,将其编译成了调用Monitor类.先看看下面的C#源代码: public sta ...
- 解析PHP中的file_get_contents获取远程页面乱码的问题【转】
在工作中,遇到一个问题.我需要将一个网址(该网址是一个json数据的接口,即 打开该网址,在浏览器中显示的是json数据),我使用file_get_contents($url),数据是乱码的. 通过查 ...
- 16位的MD5加密和32位MD5加密的区别
16位的MD5加密和32位MD5加密的区别 MD5加密后所得到的通常是32位的编码,而在不少地方会用到16位的编码它们有什么区别呢?16位加密就是从32位MD5散列中把中间16位提取出来!其实破解16 ...
- SAP FI/CO凭证不一致的解决办法
First, use program RKACOR20 to delete the incorrect CO documents. OKBA - Transfer FI Documents to CO ...
- Class.asSubclass浅谈
这是java.lang.Class中的一个方法,作用是将调用这个方法的class对象转换成由clazz参数所表示的class对象的某个子类.举例来说, 上面的代码将strList.getClass() ...
- poj1066Treasure Hunt(线段相交)
链接 很纠结的找到了所有线段的中点,又很纠结的找到了哪些中点可以直接相连,最后bfs一下求出了最短路.. #include <iostream> #include<cstdio> ...
- iOS开发之 获取手机的网络的ip地址
首先在使用的地方导入 #include <ifaddrs.h> #include <arpa/inet.h> 然后直接调用 - (NSString *)getIPAddress ...
- iOS之UIImagePickerController的应用
直接代码敬之 @import MobileCoreServices; @import AVFoundation; <UIImagePickerControllerDelegate,UINavig ...
- oninput,onpropertychange,onchange的用法和区别【转载】
1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”.如下图所示: 因此,稍微研究了一下oninput,onpropertychange, ...