上回玩到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. <<< Tomcat 部署项目There are no resources that can be added or removed from the server

    错误信息:没有资源可以添加或删除的服务器 解决方式: 方式1.选中项目右键——找到Project Facets——勾选Dynamic Web Project和java 方式2.新建一个同名web项目, ...

  2. Python脚本报错AttributeError: ‘module’ object has no attribute’xxx’解决方法

    最近在编写Python脚本过程中遇到一个问题比较奇怪:Python脚本完全正常没问题,但执行总报错"AttributeError: 'module' object has no attrib ...

  3. Maven+Spring MVC Spring Mybatis配置

    环境: Eclipse Neon JDK1.8.0 Tomcat8.0 先决条件: Eclipse先用maven向导创建web工程.参见本站之前随笔. 本机安装完成mysql5:新建用户xuxy03设 ...

  4. asp.net 的页面几种传值方式

    http://www.cnblogs.com/makqiq/p/5882448.html 1.Querystring Querystring也叫查询字符串,这种页面间传递数据是利用网页地址URL.如果 ...

  5. win8.1系统的安装方法详细图解教程

    win8.1系统的安装方法详细图解教程 关于win8.1系统的安装其实很简单 但是有的童鞋还不回 所以今天就抽空做了个详细的图解教程, 安装win8.1系统最好用U盘安装,这样最方便简单 而且系统安装 ...

  6. MYSQL存储过程、游标、触发器

    MySQL5 中添加了存储过程的支持. 大多数SQL语句都是针对一个或多个表的单条语句.并非所有的操作都怎么简单.经常会有一个完整的操作需要多条才能完成  存储过程简单来说,就是为以后的使用而保存的一 ...

  7. tnt_esri.dat Arcgis8.1安装license

    arcgis8.1授权文件内容,复制个txt重命名为tnt_esri.dat即可.注意替换yourcomputername为你的计算机名   SERVER yourcomputername ESRI_ ...

  8. ubuntu一些基本软件安装方法

    ubuntu一些基本软件安装方法 首先说明一下 ubuntu 的软件安装大概有几种方式:1. deb 包的安装方式deb 是 debian 系 Linux 的包管理方式, ubuntu 是属于 deb ...

  9. 浅谈Android中layout_weight

    引言 在开发android过程中,我们经常需要对界面进行按比例进行布局,我们一般都会使用layout_属性来进行设置.今天这篇文章我们就来简单介绍下layout_weight的使用和布局原理.随着做项 ...

  10. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...