上回玩到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交互的更多相关文章

  1. 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

    一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...

  2. Django+Tastypie作后端，RequireJS+Backbone作前端的TodoMVC

    一.配置好环境 接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子 注意:直接本地用backbone.localStorage插件运行TodoMVC会报 ...

  3. Django+Tastypie作后端，Backbone作前端的TodoMVC

    TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...

  4. Backbone源码解析（六）：观察者模式应用

    卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解.这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和 ...

  5. 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 的目的是 ...

  6. 使用backbone的history管理SPA应用的url

    本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...

  7. Backbone.js应用基础

    前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...

  8. backbone入门示例

    最近因为有个项目需要用backbone+mui  所以最近入坑backbone. Backbonejs有几个重要的概念,先介绍一下:Model,Collection,View,Router.其中Mod ...

  9. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

随机推荐

  1. rsync数据同步备份

    一.rsync简介 (1)rsync是什么? rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具. (2)rsync作用比较 远程拷贝:有点类似ssh的scp ...

  2. SDL 显示解码后的yuv12数据

    在上篇h264解码为yuv12后http://jhlong12345.blog.163.com/blog/static/1230631292015725115058709/ ,需要显示出来,使用sdl ...

  3. 外景VR的应用

    留坑,续写. 最近在做外景的项目,被相关的帧率优化和灯光布置困扰的不要不要的.下面写下我是怎么优化帧率和对帧率的一些理解. 帧率,游戏的重要影响因素,会对玩家的手感以及视觉产生重大的影响,一般的游戏帧 ...

  4. 各大主流.Net的IOC框架性能测试比较

    Autofac下载地址:http://code.google.com/p/autofac/ Castle Windsor下载地址:http://sourceforge.net/projects/cas ...

  5. git学习之旅

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d ...

  6. rqnoj343 mty的考验

    题目描述 啊!几经周折.mty终于找到了他的偶像.他就是….fyc! 可是fyc这样的高级人士可不喜欢一个人总是缠着他.于是他出了一道难题想考考mty.fyc有几个手下:陈乐天,舒步鸡,胡巍……现在f ...

  7. scp命令详解

    \ svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令+scp命令详解   名称:cp 使用权限: ...

  8. oracle分区表知识

    在F5中查看执行计划的时候总是看到很多信息: range分区 执行计划中出现的: 分区表,按 n1 ,n2 分区 partition range single:访问单个分区 partition ran ...

  9. 听说awk语言也可以编写脚本

    导读 从 awk 系列开始,我们都是在命令行或者脚本文件里写一些简短的 awk 命令和程序.然而 awk 和 shell 一样也是一个解释型语言.通过从开始到现在的一系列的学习,你现在能写可以执行的 ...

  10. table的border重合问题

    1. table { border-collapse: collapse; } td { border: 1px solid blue; } 用css的方法直接实现 2. border="1 ...