使用搜索参数获取 Backbone.js 集合

js81xvg6  于 2022-11-10  发布在  其他
关注(0)|答案(4)|浏览(125)

我想使用Backbone.js实现一个搜索页面。搜索参数取自一个简单的表单,服务器知道解析查询参数并返回结果的json数组。我的模型大致如下所示:

App.Models.SearchResult = Backbone.Model.extend({
    urlRoot: '/search'
});

App.Collections.SearchResults = Backbone.Collection.extend({
    model: App.Models.SearchResult
});

var results = new App.Collections.SearchResults();

我希望每次执行results.fetch()时,搜索表单的内容也将与GET请求一起序列化。是否有简单的方法来添加此内容,或者我的方法不正确,可能应该手动编写请求并从返回的结果中创建集合:

$.getJSON('/search', { /* search params */ }, function(resp){
    // resp is a list of JSON data [ { id: .., name: .. }, { id: .., name: .. }, .... ]
    var results = new App.Collections.SearchResults(resp);

   // update views, etc.
});

有什么想法?

jpfvwuh4

jpfvwuh41#

Backbone.js fetch with parameters回答了您的大部分问题,但我也在这里提出了一些问题。
data参数添加到您的fetch调用中,例如:

var search_params = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3',
  ...
  'keyN': 'valueN',
};

App.Collections.SearchResults.fetch({data: $.param(search_params)});

现在您的调用url已经添加了可以在服务器端解析的参数。

8e2ybdfx

8e2ybdfx2#

  • 注意:代码已简化且未经测试 *

我认为您应该将功能分开:

搜索模型

它是您服务器端的正确 * 资源 *。唯一允许的操作是CREATE

var Search = Backbone.Model.extend({
  url: "/search",

  initialize: function(){
    this.results = new Results( this.get( "results" ) );
    this.trigger( "search:ready", this );
  }
});

结果集合

它只负责收集Result模型的列表

var Results = Backbone.Collection.extend({
  model: Result
});

搜索表单

您可以看到,此视图正在执行智能作业,侦听form.submit,创建一个新的Search对象并将其发送到服务器成为created。此created使命并不意味着必须将搜索存储在数据库中,这是正常的creation行为,但它并不总是需要这样。在我们的例子create中,搜索意味着搜索DB,寻找具体的寄存器。

var SearchView = Backbone.View.extend({
  events: {
    "submit form" : "createSearch"
  },

  createSearch: function(){
    // You can use things like this
    // http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery
    // to authomat this process
    var search = new Search({
      field_1: this.$el.find( "input.field_1" ).val(),
      field_2: this.$el.find( "input.field_2" ).val(),
    });

    // You can listen to the "search:ready" event
    search.on( "search:ready", this.renderResults, this )

    // this is when a POST request is sent to the server
    // to the URL `/search` with all the search information packaged
    search.save(); 
  },

  renderResults: function( search ){
    // use search.results to render the results on your own way
  }
});

我认为这种解决方案非常干净、优雅、直观,而且非常具有可扩展性。

z9zf31ra

z9zf31ra3#

找到了一个非常简单的解决方案--重写集合中的url()函数:

App.Collections.SearchResults = Backbone.Collection.extend({

  urlRoot: '/search',

  url: function() {
    // send the url along with the serialized query params
    return this.urlRoot + "?" + $("#search-form").formSerialize();
  }
});

希望这不会吓到任何比我有更多的 Backbone / Javascript技能的人。

bqjvbblv

bqjvbblv4#

看起来当前版本的Backbone(或者jQuery)会自动将data值字符串化,因此不再需要调用$.param
下列行产生相同的结果:

collection.fetch({data: {filter:'abc', page:1}});
collection.fetch({data: $.param({filter:'abc', page:1})});

查询字符串将为filter=abc&page=1
编辑:这应该是一个评论,而不是回答。

相关问题