Backbone POST JSON instead of GET

Question

The following code works in Backbone with hardcoded data using a POST to fetch data

var FullTextSearch = Backbone.Collection.extend({
  url: '/fulltextsearch'
});

var SearchResultsListView = Backbone.View.extend({
  el: '.page',
  render: function () {
    var that = this;
    var searchResults = new FullTextSearch();
    searchResults.fetch({
      type: "post",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      data: '{ "searchtext": "abc" }',
      success: function (searchResults) {
        var template = _.template($('#search-results-list-template').html(), {searchResults: searchResults.models});
        that.$el.html(template);
      }
    })
  }
});

Now the challenge is to pass in the data as JSON payload from a search form. I have tried something like this without success, haven't tried to load it from search form yet though that's my end goal so if there is a solution for that, it's even better!

<script type="text/template" id="search-results-list-template">
    <form class="search-form">
      <input type="text" name="searchtext">
      <input type="submit" class="btn" value="Search">
    </form>
... rest of HTML template here...
</script>

var SearchPayload = Backbone.Model.extend({
  initialize: function(){
    console.log("SearchPayload init");
  }
});

var FullTextSearch = Backbone.Collection.extend({
  url: '/fulltextsearch'
});

var SearchResultsListView = Backbone.View.extend({
  el: '.page',
  events: {
    'submit .search-form': 'search'
  },
  search: function(ev) {
    //This is not working yet
    var searchPayload = $(ev.currentTarget).serializeObject();
    console.log("search form clicked, " + searchText);
    return false;
  },
  render: function () {
    var that = this;
    var searchResults = new FullTextSearch();
    var searchPayload = new SearchPayload({searchtext: "*"});
    searchResults.fetch({
      type: "post",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      data: that.searchPayload,
      success: function (searchResults) {
        var template = _.template($('#search-results-list-template').html(), {searchResults: searchResults.models});
        that.$el.html(template);
      }
    })
  }
});

The POST request is not being set properly, here's what I am seeing in the debugger, the JSON payload is not part of the request

Request URL:http://localhost:1234/fulltextsearch
Request Method:POST
Status Code:400 Bad Request
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:0
Content-Type:application/json; charset=utf-8
Cookie: AJS.conglomerate.cookie=""
Host:localhost:1234
Origin:http://localhost:1234
Referer:http://localhost:1234/index.html?searchtext=abc
User-Agent:Mozilla/5.0 (Macintosh;Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.102 Safari/537.36
X-Requested-With:XMLHttpRequest
Response Headersview source
Content-Length:40
Content-Type:text/plain; charset=UTF-8
Date:Tue, 04 Feb 2014 23:29:46 GMT
Server:spray-can/1.2.0

ANSWER Based on this post, I got it working as such

<script type="text/template" id="search-results-list-template">
    <form class="search-form">
      <input type="text" name="searchtext">
      <input type="submit" class="btn" value="Search">
    </form>
... rest of HTML template here...
</script>

var SearchPayload = Backbone.Model.extend({
  initialize: function(){
    console.log("SearchPayload init");
  }
});

var FullTextSearch = Backbone.Collection.extend({
  url: '/fulltextsearch'
});

var SearchResultsListView = Backbone.View.extend({
  el: '.page',
  events: {
    'submit .search-form': 'search'
  },
  search: function(ev) {
    //This is not working yet
    var searchPayload = $(ev.currentTarget).serializeObject();
    console.log("search form clicked, " + searchText);
    return false;
  },
  render: function () {
    var that = this;
    var searchResults = new FullTextSearch();
    var searchPayload = JSON.stringify(new SearchPayload());
    searchResults.fetch({
      type: "post",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      data: searchPayload,
      success: function (searchResults) {
        var template = _.template($('#search-results-list-template').html(), {searchResults: searchResults.models});
        that.$el.html(template);
      }
    })
  }
});

Answer 1

According to the source, Backbone.sync (called by fetch), uses the data from option.attrs or the model itself. Probably best to make this call on your own, outside of Backbone, and then populate the collection with results, it doesn't make sense to use fetch in this regard.

Answer 2

I think what you are looking for is Backbone.emulateJSON