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

ANSWER 基于这个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

Backbone POST JSON而不是GET

2 个答案: