主干 POST JSON 而不是 GET

Question

以下代码在 Backbone 中使用硬编码数据使用 POST 来获取数据

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);
      }
    })
  }
});

现在的挑战是从搜索表单中将数据作为 JSON 有效负载传递。我尝试过这样的事情但没有成功，还没有尝试从搜索表单中加载它，尽管这是我的最终目标，所以如果有解决方案，那就更好了！

<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);
      }
    })
  }
});

POST 请求未正确设置，这是我在调试器中看到的，JSON 有效负载不是请求的一部分

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

回答 基于这个post，我得到了它的工作原理

<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

根据来源，Backbone.sync（由 fetch 调用）使用来自 option.attrs or the model itself 的数据。最好在 Backbone 之外自行调用，然后用结果填充集合，在这方面使用 fetch 没有意义。

Answer 2

我认为您正在寻找的是 Backbone.emulateJSON