取骨干收集与搜索参数(Fetch Backbone collection with search p

2019-06-27 23:23发布

我想实现使用搜索页面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请求。 有一个简单的方法来添加这个,还是我做了错误的方式和可能应该handcoding请求,并创建从返回的结果集:

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

思考?

Answer 1:

Backbone.js的取得与参数回答您的大多数问题,但是我把一些在这里。

添加data参数,以此来fetch调用,例如:

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

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

现在,您的通话网址增加了,你可以在服务器端解析参数。



Answer 2:

注意:代码简化,并且未测试

我想你应该分裂的功能:

搜索模式

它是在你的服务器端适当的资源 。 唯一允许的动作是CREATE

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

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

结果集

它只是负责收集结果型号列表中

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

搜索表单

你看,这个观点是使智能工作,听form.submit ,创建一个新的Search对象,并将其发送到服务器中created 。 这个created任务并不意味着搜索必须存储在数据库中,这是正常的creation行为,但它并不总是需要这样。 在我们的例子create一个搜索是指搜索数据库寻找具体的寄存器。

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

我认为,这种解决方案是非常简洁,优雅,直观,非常扩展。



Answer 3:

发现了一个很简单的解决方案-重写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();
  }
});

但愿这不会吓坏人谁拥有更多的骨干/ JavaScript的能力比我自己。



Answer 4:

这似乎骨干网(也许jQuery的)的当前版本自动stringifies的data值,所以没有必要调用$.param了。

以下行产生相同的结果:

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

查询字符串将是filter=abc&page=1

编辑:这应该是一个评论,而不是答案。



文章来源: Fetch Backbone collection with search parameters