码迷,mamicode.com
首页 > 其他好文 > 详细

Tastypie与Backbone交互

时间:2015-02-01 23:18:41      阅读:343      评论:0      收藏:0      [点我收藏+]

标签:

上回玩到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交互

标签:

原文地址:http://www.cnblogs.com/fastmover/p/4266515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!