Pobieranie kolekcji szkieletowej z parametrami wyszukiwania

Chciałbym zaimplementować stronę wyszukiwania używając Backbone.js. Parametry wyszukiwania są pobierane z prostego formularza, a serwer wie, aby przeanalizować parametry zapytania i zwrócić tablicę wyników json. Mój model wygląda mniej więcej tak: 

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

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

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

Chciałbym, aby za każdym razem, gdy wykonam results.fetch(), zawartość formularza wyszukiwania będzie również serializowana za pomocą GET request. Czy jest prosty sposób, aby to dodać, czy robię to źle i prawdopodobnie powinienem zakodować żądanie i tworzenie kolekcji ze zwracanych wyników: 

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

Myśli?

Author: sa125, 2012-09-07
Source

4 answers

Kręgosłup.js fetch z parametrami odpowiada na większość twoich pytań, ale kilka też tu umieszczam.

Dodaj parametr data do wywołania fetch, przykład: 

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

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

Teraz twój adres URL połączenia ma dodane parametry, które możesz przeanalizować po stronie serwera.

 85
Author: jakee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:09

uwaga: kod uproszczony i nie testowany

Myślę, że powinieneś podzielić funkcjonalność:

Model Wyszukiwania

Jest to właściwyzasób po stronie serwera. Jedyną dozwoloną czynnością jest CREATE.

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

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

Zbiór Wyników

Jest tylko odpowiedzialny za zbieranie listy modeli wyników 

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

Formularz Wyszukiwania

Widzisz, że ten widok czyni inteligentną pracę, słuchając form.submit, utworzenie nowego obiektu Search i wysłanie go do serwera jako created. Ta misja created nie oznacza, że Wyszukiwanie musi być przechowywane w bazie danych, jest to normalne zachowanie creation, ale nie zawsze musi tak być. W naszym przypadku create Wyszukiwanie oznacza przeszukiwanie DB w poszukiwaniu konkretnych rejestrów.

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
  }
});
Myślę, że tego typu rozwiązanie jest bardzo czyste, eleganckie, intuicyjne i bardzo rozszerzalne.
 13
Author: fguillen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-23 03:07:48

Znaleziono bardzo proste rozwiązanie-nadpisanie funkcji url() w zbiorze: 

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

Mam nadzieję, że to nie przeraża nikogo, kto ma trochę więcej umiejętności kręgosłupa / Javascript niż ja.

 6
Author: sa125,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-07 10:33:40

Wydaje się, że obecna wersja Backbone (a może jQuery) automatycznie stringuje wartość data, więc nie ma już potrzeby wywoływania $.param.

Następujące linie dają ten sam wynik: 

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

Querystring będzie filter=abc&page=1.

EDIT: to powinien być komentarz, a nie ODPOWIEDŹ.

 5
Author: alekop,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-06 00:21:22