Estrutura de backbone para formulário de busca e resultados?

9

Estou trabalhando com o Backbone.js pela primeira vez e tentando entender como funciona. Eu tenho um formulário de pesquisa que puxa os resultados via Ajax e grava-os na página dinamicamente.

Agora estou tentando descobrir a melhor forma de estruturar isso no Backbone -

Aqui está o meu 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>

Veja como estou pensando em estruturar o código do 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 });

Minhas perguntas:

  1. É basicamente uma estrutura sensata a ser usada, com uma visualização para o formulário e outra para os resultados - a primeira vista atualizando o modelo, a segunda visualização assistindo o modelo?
  2. Eu também quero atualizar o conteúdo do cabeçalho <h3> results quando houver novos resultados - onde é o lugar mais sensato para fazer isso, no código acima?
  3. Desejo alternar a classe selected em uma entrada quando o usuário clica em uma entrada de formulário - onde é o lugar lógico para fazer isso, dentro do código acima?

Obrigado pela sua ajuda.

    
por Richard 08.01.2013 в 01:07
fonte

1 resposta

5
  1. Sim, essa é uma organização lógica e uma ótima maneira de usar as exibições do Backbone.
  2. Você poderia abordar isso de duas maneiras:
    • Tenha uma visualização separada para o título (por exemplo, SearchResultsTitleView ) que também escute alterações no modelo. Isso parece um pouco excessivo para mim.
    • Peça ao seu SearchResultsView para atualizar o título <h3> e os resultados <ul> . Em vez de vincular-se ao #results-list <ul> , ele pode se vincular ao #results <div> e ter duas funções, uma para atualizar cada filho.
  3. Isso parece ser de responsabilidade do SearchFormView , ou escutando alterações no modelo ou simplesmente atualizando o estado quando o evento ocorre.
por Rob Hruska 08.01.2013 / 03:55
fonte