Question

我试图在后端使用Django制作一个Backbone应用程序。我正在关注Backbone教程。我使用了以下代码：

代码

<!doctype html>
<html lang = "en">
    <meta charset = "utf-8">
    <title>IstreetApp</title>
    <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Book Manager</h1>
        <hr />
        <div class="page"></div>
    </div>

    <script type = "text/template" id = "booklist.template">

    </script>

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
    <script>

        $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
            options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
        });

        var Books = Backbone.Collection.extend({
            url: '/books'
        });

        var BookList = Backbone.View.extend({
            el: '.page',
            render: function () {
                var that = this;
                var books = new Books();
                books.fetch({
                    success: function(books) {
                        var template = _.template($('#booklist.template').html(), {books: books.models});
                        that.$el.html(template);
                    }
                })
            }
        });

        var Router = Backbone.Router.extend({
            routes: {
                '': 'home'
            }
        })

        var bookList = new BookList();

        var router = new Router();
        router.on('route:home', function () {
            bookList.render();
        });

        Backbone.history.start();
    </script>

</body>
</html>

由于未定义集合，因此不会执行成功代码。我想收集数据应该来自服务器通过Django，但我不知道如何以及以何种形式。请帮助。我对骨干和Django都很陌生。

Answer 1

当你在你的集合上调用fetch时，它会发出一个AJAX请求：

 http://backbonejs-beginner.herokuapp.com/books

但是，没有设置API。两件事中的任何一件都需要发生：

1）您需要修改代码以指向不同的URL，即具有现有API的URL（可能是您使用的任何教程都有这样的API）

2）您需要在yoursever.com上自己创建这样的API（然后让您的Backbone代码指向该API的URL）

如果没有服务器支持它，像save和fetch等操作在Backbone中的操作根本无法运行。

作为旁注，Django是一个web 站点框架。虽然您可以使用它来创建服务器端 API ，但这并不是Django的重点。因此，在Django中存在几个很好的第三方库来执行RESTful API（即Backbone喜欢的那种）;我个人建议使用Django REST Framework（我使用它并且效果很好）或者TastyPie（从未使用它，但它非常受欢迎）。

Answer 2

使用骨干集合时，需要从api url（http://backbonejs-beginner.herokuapp.com/books）返回json对象数组实施例

{[{"name":"bookname", "publisher": "penguin"}, {"name":"bookname", "publisher":"penguin"}]}

您还需要一个适合您收藏的模型。模型看起来像这样示例：

var Book = Backbone.Model.extend({
defaults: {
"name":  "",
"publisher": ""
}
});

集合的工作方式是解析json数组并将数组中的每个对象转换为您特定的模型（在此瞬间是具有名称和发布者值的单个书籍）。

当您在模型上创建.fetch（）时，您正在发出GET请求，因此请确保您的http://backbonejs-beginner.herokuapp.com/books网址已准备好接收GET请求并使用我指定的格式响应json数据最佳。

Backbone Collection

2 个答案: