Arama formu ve sonuçları için omurga yapısı?

Question

Backbone.js ile ilk defa çalışıyorum ve kafamın nasıl çalıştığını anlamaya çalışıyorum. Ajax ile sonuçlara ulaşan ve onları dinamik olarak sayfaya aktaran bir arama formum var.

Şu anda omurganın en iyi şekilde nasıl yapılandırılacağını anlamaya çalışıyorum - I read this SO question, ancak formu ve sonuçları nasıl birbirine bağlayacağımı tam olarak anlayamıyorum.

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

Sorularım:

1. bu temelde mantıklı bir yapı mı ben Backbone kodun yapısını düşünüyorum nasıl
   İşte

   <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> 
   

   var: Burada

   benim HTML bulunuyor Model için ilk bakış, modeli görüntüleyen ikinci görünüm, form için bir görünüm ve bir sonuç için kullanın.
2. Ayrıca, yeni sonuçlar olduğunda <h3> sonuç başlığının içeriğini güncellemek istiyorum - yukarıdaki kodda bunu yapmak için en mantıklı yer neresidir?
3. Kullanıcı bir form girdisini tıklattığında bir girişe selected sınıfını değiştirmek istiyorum - yukarıdaki kod içinde, bunun mantıksal yeri nerede?

Yardımlarınız için teşekkürler.

Answer 1

1. Evet, bu mantıksal bir organizasyon ve Backbone Görünümlerini kullanmanın harika bir yoludur.
2. Buna birkaç yol yaklaşım olabilir:
   • da model üzerinde değişiklikler için dinler başlığı (örn SearchResultsTitleView) için ayrı bir görünümü var. Bu benim için biraz fazla görünüyor.
   • SearchResultsView ürününüzün hem <h3> başlığındaki hem de sonuçları <ul> numaralı güncelleştirmeyi güncelleştirin. Kendisini #results-list<ul>'a bağlamak yerine, #results<div>'a bağlanabilir ve her biri bir çocuğu güncellemek için iki işlevi vardır.
3. Bu, SearchFormView'un sorumluluğunda görünebilir, ya modeldeki değişiklikleri dinleyebilir veya yalnızca olay gerçekleştiğinde durumu güncelleyebilir.