Struktura szkieletu dla formularza wyszukiwania i wyników?

Question

Pracuję z Backbone.js po raz pierwszy i próbuję zrozumieć, jak to działa. Mam formularz wyszukiwania, który ściąga wyniki przez Ajax i dynamicznie wypisuje je na stronę.

Teraz próbuję dowiedzieć się, jak najlepiej to zorganizować w kręgosłup - I read this SO question, ale nie do końca rozumiem, jak połączyć formularz i wyniki razem.

Tu jest mój 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> 

Oto jak myślę o strukturyzacji kodu 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 }); 

Moje pytania:

1. Czy to w zasadzie sensowne struktury do użyć, z jednym widokiem dla formularza i jednym dla wyników - pierwszy widok aktualizujący model, drugi widok oglądający model?
2. Chcę również zaktualizować zawartość nagłówka wyników <h3>, gdy pojawią się nowe wyniki - gdzie jest to najbardziej sensowne miejsce w powyższym kodzie?
3. Chcę przełączyć klasę selected na dane wejściowe, gdy użytkownik kliknie dane wejściowe formularza - gdzie jest to logiczne miejsce w powyższym kodzie?

Dzięki za pomoc.

Answer 1

1. Tak, jest to logiczna organizacja i świetny sposób wykorzystania widoków kręgosłupa.
2. Można podejść do tego kilka sposobów:
   • mają oddzielne widok dla tytule (np SearchResultsTitleView), który nasłuchuje także do zmian na modelu. Wydaje mi się to nieco przesadzone.
   • Dokonaj aktualizacji SearchResultsView zarówno tytułem , jak i wynikami <ul>. Zamiast wiązania się z #results-list<ul>, może on wiązać się z #results<div> i mieć dwie funkcje, jedną do aktualizacji każdego dziecka.
3. To wydaje się być obowiązkiem SearchFormView, albo słuchać zmian w modelu lub po prostu aktualizacji stanu, gdy zdarzenie nastąpi.