Question

您好stackoverflow社区。

我正在编写“Developing Backbone.js Applications”书的书库示例，我使用flask + peewee完成了RESTful API。 Backbone.js只执行一个OPTIONS请求而已。

这是API规范：

url             HTTP Method  Operation
/api/books      GET          Get an array of all books
/api/books/:id  GET          Get the book with id of :id
/api/books      POST         Add a new book and return the book with an id attribute added
/api/books/:id  PUT          Update the book with id of :id
/api/books/:id  DELETE       Delete the book with id of :id

这是主要代码：

@app.route('/api/books', methods=['DELETE', 'GET', 'POST', 'PUT'])
@app.route('/api/books/<int:book_id>', methods=['DELETE', 'GET', 'PUT'])
def books(book_id=None):
    if book_id:
        if request.method == 'DELETE':
            Book.delete().where(Book.id == book_id).execute()

        elif request.method == 'GET':
            book = Book.get(id=book_id)
            return jsonify(get_attr(book))

        elif request.method == 'PUT':
            book = Book.get(id=book_id)
            book.update(**parse_attr(request)).execute()

    else:
        if request.method == 'GET':
            return jsonify([get_attr(entry) for entry in Book.select()])

        elif request.method == 'POST':
            new_book = Book(**parse_attr(request))
            new_book.save()
            return jsonify(get_attr(new_book))

    return '', 200

这是OPTIONS请求的响应标头：

#curl -I -X OPTIONS  http://127.0.0.1:5000/api/books
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Allow: HEAD, GET, PUT, POST, OPTIONS, DELETE
Content-Length: 0
Server: Werkzeug/0.9.4 Python/2.7.3
Date: Thu, 09 Jan 2014 20:29:07 GMT

我希望有人可以帮我这个，直到凌晨4点才累了，沮丧地感到麻烦......

PS：我为我糟糕的英语道歉，这对我来说是第二语言。

~~~更新时间：2013/01/10 ~~~

./ JS /视图/ library.js

var app = app || {};

app.LibraryView = Backbone.View.extend({
    el: '#books',

    initialize: function(initialBooks) {
        this.collection = new app.Library(initialBooks);
        this.collection.fetch({reset: true});
        this.render();

        this.listenTo(this.collection, 'add', this.renderBook);
        this.listenTo(this.collection, 'reset', this.render);
    },

    events: {
        'click #add': 'addBook'
    },

    render: function() {
        this.collection.each(function(item) {
            this.renderBook(item);
        }, this);
    },

    renderBook: function(item) {
        var bookView = new app.BookView({
            model: item
        });
        this.$el.append(bookView.render().el)
    },

    addBook: function(e) {
        e.preventDefault();

        var formData = {};

        $('#addBook div').children('input').each(function(i, el) {
            if($(el).val() != '') {
                formData[el.id] = $(el).val();
            }
        });

        this.collection.add(new app.Book(formData));
        //this.collection.create(formData);
    },
});

./ JS /视图/ book.js

var app = app || {};

app.BookView = Backbone.View.extend({
    tagName: 'div',
    className: 'bookContainer',
    template: _.template($('#bookTemplate').html()),

    events: {
        'click .delete': 'deleteBook'
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    deleteBook: function() {
        this.model.destroy();
        this.remove();
    }
});

./ JS /集合/ library.js

var app = app || {};

app.Library = Backbone.Collection.extend({
    model: app.Book,
    url: ' http://127.0.0.1:5000/api/books'
});

./ JS / app.js

var app = app || {};

$(function() {
    new app.LibraryView();
});

./models/book.js
var app = app || {};

app.Book = Backbone.Model.extend({
    defaults: {
        coverImage: 'img/placeholder.png',
        title: 'No title',
        author: 'Unknown',
        releaseDate: 'Unknow',
        keywords: 'None'
    }
});

Answer 1

在js/views/library.js中，您使用的是Collection.add而不是Collection.create，这意味着模型永远不会与服务器同步。可以在Collection.sync上致电Library，也可以直接save新模型。

Backbone.js＆amp; Flask RESTful API（仅限OPTIONS请求）

1 个答案: