上回玩到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. jQuery动态增删改查表格信息，可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. fedora 24 使用扇贝网页版没有声音

    (扇贝的官方答疑:https://www.shanbay.com/help/faq/no_voice/) 第4步下载MP3测试文件没办法使用: 似乎因为MP3格式的文件是的版权问题. 打算安装能处理M ...

  3. 使用Java 多线程编程 让三个线程轮流输出ABC，循环10次后结束

    简要分析: 要求三个线程轮流输出,这里我们要使用一个对象锁,让关键部分的代码放入同步块当中.同时要有一个变量记录打印的次数到达10次循环后不再打印,另外一个就是要给每个线程一个标志号,我们根据标识号来 ...

  4. go智能提示（重要）

    使用VIM开发go程序时,智能提示是一个大问题. 最终解决方案是使用 YCM,它是使用 gocode 来进行智能提示的.一切配置好之后,你会发现标准库和第三方库都可以智能提示,但自己写的包却不能,猜想 ...

  5. 安装yii2时出错 Invalid Parameter – yii\base\InvalidParamException

    最近composer安装yii2的时候页面报了这个错,应该是bower的前端资源位置改变的缘故! Invalid Parameter – yii\base\InvalidParamException ...

  6. MySQL Cluster在线添加数据节点

    增加或减少数据节点的数量和 NoOfReplicas(即副本数,通过管理节点的config.ini配置文件来设置)有关,一般来说NoOfReplicas是2,那么增加或减少的数量也应该是成对的,否则要 ...

  7. Linux/CentOS优化配置 汇总

    [强烈要求做的]CentOS启用sudo,禁用root远程登录 Linux命令行修改IP.网关.DNS.主机名 的方法 Linux开机直接进入“命令行”模式 更改CentOS 6.x yum源为国内1 ...

  8. LCTT 三岁啦

    导读 不知不觉,LCTT 已经成立三年了,对于我这样已经迈过四张的人来说,愈发的感觉时间过得真快.这三年来,我们 LCTT 经历了很多事情,有些事情想起来仍恍如昨日. 三年前的这一天,我的一个偶发的想 ...

  9. DirectAccess

    DirectAccess Direct Access 称为直接访问,它是Windows 7(企业版或者更高级版本)和Windows Server 2008 R2中的一项新功能.凭借这个功能,外网的用户 ...

  10. Angular2 管道

    1. 说明 管道用来转换模板显示的内容,应用程序中经常出现获取数据,转换数据,显示数据的逻辑.管道就是用来在转换数据阶段起作用的.主要存在两种类型的管道,pure pipe和impure pipe 2 ...