खोज फ़ॉर्म और परिणामों के लिए रीढ़ की हड्डी संरचना?

Question

मैं पहली बार Backbone.js के साथ काम कर रहा हूं, और यह कैसे काम करता है इसके चारों ओर अपने सिर को पाने की कोशिश कर रहा है। मेरे पास एक खोज फ़ॉर्म है जो अजाक्स के माध्यम से परिणाम खींचता है और उन्हें पृष्ठ पर गतिशील रूप से लिखता है।

अब मैं यह पता लगाने की कोशिश कर रहा हूं कि बैकबोन - I read this SO question में इसे कैसे व्यवस्थित किया जाए, लेकिन मैं पूरी तरह से समझ नहीं पा रहा हूं कि फ़ॉर्म और परिणामों को एकसाथ कैसे तारित किया जाए।

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

मेरे सवालों का:

1. को यह मूल रूप से एक समझदार संरचना है

   यहाँ मेरी HTML है फॉर्म के लिए एक दृश्य और परिणामों के लिए एक के साथ उपयोग करें - मॉडल को अपडेट करने वाला पहला दृश्य, मॉडल देखने वाला दूसरा दृश्य?

2. मैं नए परिणाम होने पर <h3> परिणाम शीर्षलेख की सामग्री अपडेट करना चाहता हूं - उपर्युक्त कोड में ऐसा करने के लिए सबसे समझदार जगह कहां है?
3. मैं इनपुट पर selected कक्षा को टॉगल करना चाहता हूं जब उपयोगकर्ता फॉर्म इनपुट पर क्लिक करता है - उपर्युक्त कोड में ऐसा करने के लिए तार्किक स्थान कहां है?

आपकी सहायता के लिए धन्यवाद।

Answer 1

1. हां, यह एक तार्किक संगठन है और बैकबोन दृश्यों का उपयोग करने का एक शानदार तरीका है।
2. आप इस दृष्टिकोण सकता है कुछ तरीके:
   • शीर्षक (जैसे SearchResultsTitleView) कि भी मॉडल पर परिवर्तनों को सुनता के लिए एक अलग दृष्टिकोण है। यह मेरे लिए थोड़ा अधिक लगता है।
   • अपने SearchResultsView शीर्षक <h3> और <ul> दोनों के अपडेट अपडेट करें। #results-list<ul> पर स्वयं को बाध्य करने के बजाय, यह #results<div> से जुड़ सकता है और प्रत्येक बच्चे को अपडेट करने के लिए दो कार्य हो सकते हैं।
3. यह SearchFormView की ज़िम्मेदारी की तरह प्रतीत होता है, या तो मॉडल पर परिवर्तनों को सुनना या घटना होने पर बस राज्य को अद्यतन करना।