javascript - template - Estructura de backbone para el formulario de búsqueda y los resultados?

underscore js que es

Question

Estoy trabajando con Backbone.js por primera vez, y estoy tratando de entender cómo funciona. Tengo un formulario de búsqueda que extrae resultados a través de Ajax y los escribe dinámicamente en la página.

Ahora estoy tratando de encontrar la mejor manera de estructurar esto en Backbone: leí esta pregunta SO , pero no entiendo completamente cómo conectar el formulario y los resultados juntos.

Aquí está mi 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>

Así es como estoy pensando en estructurar el código Backbone:

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

Mis preguntas:

1. ¿Es básicamente una estructura sensata para usar, con una vista para la forma y otra para los resultados, la primera vista para actualizar el modelo, la segunda vista para ver el modelo?
2. También quiero actualizar el contenido del encabezado de resultados <h3> cuando haya nuevos resultados. ¿Cuál es el lugar más sensato para hacerlo, en el código anterior?
3. Quiero alternar la clase selected en una entrada cuando el usuario hace clic en una entrada de formulario. ¿Dónde está el lugar lógico para hacerlo, dentro del código anterior?

Gracias por tu ayuda.

Answer 1

1. Sí, esa es una organización lógica y una excelente forma de usar Vistas de Backbone.
2. Puedes acercarte a esto de dos maneras:
   • Tenga una vista separada para el título (por ejemplo, SearchResultsTitleView ) que también escuche los cambios en el modelo. Eso me parece un poco excesivo.
   • Haga que su SearchResultsView actualice el título <h3> y los resultados <ul> . En lugar de vincularse a la #results-list <ul> , podría vincularse a #results <div> y tener dos funciones, una para actualizar cada elemento secundario.
3. Eso parecería responsabilidad de SearchFormView , ya sea escuchando los cambios en el modelo o simplemente actualizando el estado cuando ocurre el evento.