Tastypie与Backbone交互
上回玩到Tastypie与jQuery交互，那么现在接着玩玩Tastypie与Backbone.js交互
先把上篇的template文件：D:\project\tastypie\mysite\blog\templates\blog\index.html改改，添加了backbone的相关依赖文件，代码如下[增、删、改、查]：
一、GET id为1的blog文章出来：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title> </head>
<body>
<script type="text/javascript" src="/static/js/underscore-min.js"></script>
<script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/js/json2.js"></script>
<script type="text/javascript" src="/static/js/backbone-min.js"></script>
<script>
$(function () {
var blogModel = Backbone.Model.extend({
urlRoot: '/api/v1/entry/',
defaults: {
user: '/api/v1/user/2/',
pub_date: '2015-01-29T11:07:30',
title: '',
body: '',
slug: ''
}
});
var blog = new blogModel({ id: 1 });
blog.fetch({
success: function(blog){
console.log(blog.toJSON());
}
}); });
</script>
</body>
</html>
打开Chrome按个F12调出log来看看结果查询内容成功,返回了一个条json记录。
二、POST一条blog
<script>
$(function () {
var blogModel = Backbone.Model.extend({
urlRoot: '/api/v1/entry/',
defaults: {
user: '/api/v1/user/2/',
pub_date: '2015-01-29T11:07:30',
title: '',
body: '',
slug: ''
}
});
var blogDetails = {
user: '/api/v1/user/2/',
pub_date: '2015-01-29T11:07:30',
title: 'blackbone test4',
body: 'blackbone test4',
slug: 'another-post4'
};
blog.save(blogDetails, {
success: function (blog) {
console.log(blog.toJSON());
},
error: function(e){
alert("error!")
}
})
});
</script>
打开Chrome按个F12调出log来看看结果Post内容成功,返回了一个条json记录。
三、通过PUT方式update一条id为1的blog
<script>
$(function () {
var blogModel = Backbone.Model.extend({
urlRoot: '/api/v1/entry/',
defaults: {
user: '/api/v1/user/2/',
pub_date: '2015-01-29T11:07:30',
title: '',
body: '',
slug: ''
}
});
var blog = new blogModel({ id: 1 }); blog.save({user:'/api/v1/user/2/',pub_date: '2015-01-29T11:07:30',title:'Haha!',body: 'blackbone test4',slug: 'another-post4'},{
success: function(blog){
console.log(blog.toJSON());
}
}); });
</script>
打开Chrome按个F12调出log来看看结果更新内容成功,返回了一个条json记录。
四、通过DELETE方式删除一条id为1的blog
<script>
$(function () {
var blogModel = Backbone.Model.extend({
urlRoot: '/api/v1/entry/',
defaults: {
user: '/api/v1/user/2/',
pub_date: '2015-01-29T11:07:30',
title: '',
body: '',
slug: ''
}
});
var blog = new blogModel({ id: 1 });
blog.destroy({
success: function () {
console.log('Destroy!');
} });
});
</script>
浏览器打开http://localhost:8000/api/v1/entry/1/记录无内容，已删除成功
Tastypie与Backbone交互的更多相关文章
- 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室
一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...
- Django+Tastypie作后端，RequireJS+Backbone作前端的TodoMVC
一.配置好环境 接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子 注意:直接本地用backbone.localStorage插件运行TodoMVC会报 ...
- Django+Tastypie作后端，Backbone作前端的TodoMVC
TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...
- Backbone源码解析（六）：观察者模式应用
卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 使用backbone的history管理SPA应用的url
本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...
- Backbone.js应用基础
前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...
- backbone入门示例
最近因为有个项目需要用backbone+mui 所以最近入坑backbone. Backbonejs有几个重要的概念,先介绍一下:Model,Collection,View,Router.其中Mod ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
随机推荐
- html页面输入框input的美化
input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同 例如: 上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式 以下是一个简 ...
- zoom在css中的作用
zoom:1 zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持.它可以设置或检索对象的缩放比例. 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来 ...
- Makefile 规则的使用
1.Makefile格式 //最终目标 all: led.o //依赖 arm-linux-ld -Tled.lds -o led.elf led.o //命令 arm-linux-objcopy - ...
- No module named django.core
在虚拟环境中将django-admin.py startproject tango_with_django_project替换为django-admin startproject tango_with ...
- Instant Radiosity实现
本来说等把课程作业做完再来弄这个,但是还是没有忍住,先做了,主要原因还是这个算法很容易实现.这个算法在1997年由Keller首次提出.虽然名字叫Instant Radiosity,但是它和Radio ...
- C语言基础(7)-float,double,long double类型
1.定义方式 3.14这个就是一个浮点常量,3f是一个浮点类型的常量 float a;//定义了一个浮点类型的小数变量,名字叫a double b;//定义了一个double类型的变量,名字叫b lo ...
- Bash 中的 _ 是不是环境变量
首先,我们想到的会是 export(等价于 declare -x)命令: $ export | grep 'declare -x _=' 没有找到,那么结论就是 _ 不是环境变量?当然没那么简单,否则 ...
- 【转】8G内存下MySQL的优化详细方案
对于任何一个数据库管理系统来说,内存的分配使用绝对可以算的上是其核心之一了,所以很多希望更为深入了解某数据库管理系统的人,都会希望一窥究竟,我也不例外. 这里给出方案 按照下面的设置试试看: key_ ...
- Linux下对比两个文件夹的方法
最近拿到一份源代码,要命的是这份源代码是浅克隆模式的git包,所以无法完整显示里面的修改的内容. 今天花了一点点时间,找了一个在Linux对比两个文件夹的方法. 其实方法很简单,用meld 去对比两个 ...
- Servlet.init() for servlet springMvc