Backbone.js＆Flask RESTful API（僅限OPTIONS請求）

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年1月10日~~~

./js/views/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/views/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/collections/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新模式。