Backbone structure for search form and results?

Question

I'm working with Backbone.js for the first time, and trying to get my head around how it works. I have a search form that pulls in results via Ajax and writes them out to the page dynamically.

I'm now trying to figure out how best to structure this in Backbone - I read this SO question, but I don't completely understand how to wire the form and the results together.

Here's my HTML:

<form id="flight-options"> <!-- options for user to choose-->
<input type="radio" name="journey" value="single">Single<br/><input type="radio" name="journey" value="return">Return
<input type="checkbox" name="airline" value="aa">AA<br><input type="checkbox" name="airline" value="united">United
</form>
<div id="results"> <!-- results, written by Ajax -->
<h3>Results</h3>
<ul id="results-list">
</div>

Here's how I'm thinking of structuring the Backbone code:

  var SearchModel = Backbone.Model.extend({
    performSearch: function(str) {
      // fire the ajax request.  provide a bound
      // _searchComplete as the callback
    },
    _searchComplete: function(results) {
      this.set("searchResults", results);
    }
  });
  var SearchFormView = Backbone.View.extend({
    tagName: "form",
    id: "flight-options",
    events: {
      "click input": "getResults"
    },
    getResults: function() {
      // Get values of selected options, use them to construct Ajax query. 
      // Also toggle 'selected' CSS classes on selected inputs here?
      this.model.performSearch(options);
    }
  });
  var SearchResultsView = Backbone.View.extend({
    tagName: "ul",
    id: "results-list",
    initialize: function() {
        this.model.on("change:searchResults", this.displayResults, this);
    },
    displayResults: function(model, results) {
      //append results to results-list here.   
      //update contents of blurb here?
    }
  });
  var searchModel = new SearchModel();
  var searchFormView = new SearchFormView({ model: searchModel });
  var searchResultsView = new SearchResultsView({ model: searchModel });

My questions:

1. Is this basically a sensible structure to use, with one view for the form and one for the results - the first view updating the model, the second view watching the model?
2. I also want to update the contents of the <h3> results header when there are new results - where is the most sensible place to do this, in the above code?
3. I want to toggle the selected class on an input when the user clicks on a form input - where is the logical place to do this, within the above code?

Thanks for your help.

Lylalyle

Answer 1

1. Yes, that's a logical organization and a great way to use Backbone Views.
2. You could approach this a couple ways:
   • Have a separate View for the title (e.g. SearchResultsTitleView) that also listens for changes on the model. That seems a bit excessive to me.
   • Have your SearchResultsView update both the title <h3> and results <ul>. Instead of binding itself to the #results-list <ul>, it might bind to the #results <div> and have two functions, one for updating each child.
3. That would seem like the responsibility of the SearchFormView, either listening for changes on the model or simply updating the state when the event occurs.

Clementclementas

Thank you very much - sorry this wasn't the most exciting question, but just needed some guidance! – Lylalyle