2012-05-20 6 views
8

Ich möchte eine einfache Suchseite mit Backbone implementieren. Es ist keine Anwendung für eine einzelne Seite, möchte aber dennoch meinen JavaScript-Code mit Backbone strukturieren. Eine Suchseite besteht aus einem Suchformular und Suchergebnissen. Die Suche erfolgt über AJAX und muss im Verlauf gespeichert werden. Wenn die Seite aus dem Verlauf geladen wird, sollten Suchabfrageparameter in das Formular geladen werden. Das Suchformular und die Suchergebnisse können als Backbone.View's implementiert werden. Allerdings habe ich Probleme, sie zusammen zu kleben.Einfache Backbone-Suchseite - wie würdest du es tun?

Was ich denke, ich brauche ich eine Art Controller. Es gibt einen Backbone.Router, aber ist es der richtige Ort? Wo sollte der AJAX-Anruf platziert werden?

Jeder Hinweis auf die Struktur einer solchen Seite ist zu begrüßen.

Antwort

10

Sie können eine SearchModel erstellen. Die SearchModel hätte eine Methode wie: "performSearch (string)", die Ihren Ajax-Anruf auslösen würde. Wenn der Aufruf gibt könnte das Modell so etwas wie:

this.set("searchResults", ajaxResult) 

und Ihre Ansichten dieser Eigenschaft des Modells binden können:

// SearchResultsView 
Backbone.View.extend({ 
    initialize: function() { 
     this.model.on("change:searchResults", this.displayResults, this); 
    }, 
    displayResults: function(model, results) { 
     // do whatever... 
    } 
}); 

Beispiel Ansicht Suchformular Referenz:

Backbone.View.extend({ 
    events: { 
     "submit": "formSubmitted" 
    }, 
    formSubmitted: function(e) { 
     this.model.performSearch(e.target.value); 
    } 
}); 

Beispiel SearchModel als Referenz:

Backbone.Model.extend({ 
    performSearch: function(string) { 
     // fire your ajax request. provide a bound 
     // _searchComplete as the callback 
    }, 
    _searchComplete: function(results) { 
    this.set("searchResults", results); 
    } 
}); 
Verwandte Themen