Avete l'idea giusta e Backbone dovrebbe rendere più facile per voi di fare le cose usando la stessa panoramica di base di alto livello del vostro flusso di lavoro. Nota che stai ancora utilizzando jQuery per questa funzionalità: lo farai semplicemente attraverso gli aspetti organizzativi dei tipi di Backbone.
Ci sono un paio di elementi chiave che si vorrà in atto, la maggior parte dei quali già citato:
- Una spina dorsale vista per coordinare gli elementi HTML con il tuo codice JavaScript
- Una spina dorsale del modello per memorizzare tutti i dati che l'input dell'utente negli elementi HTML
- un server back-end in grado di gestire le chiamate JSON RESTful tramite richieste AJAX da jQuery
penso che il l'unica cosa che ti manca è che il modello ha un metodo save su di esso, che avvolge tutta la logica per chiamare i percorsi di creazione/aggiornamento sul tuo server back-end.Il modello ha anche un metodo delete per gestire l'eliminazione dal server.
Come un esempio molto semplice, ecco un modulo che esegue il rendering di un modello HTML sullo schermo, raccoglie l'input dell'utente nel modello e quindi lo salva sul server.
modello
Un HTML:
<script id="myTemplate" type="text/x-jquery-tmpl">
First name: <input id="first_name"><br/>
Last Name: <input id="last_name"><br/>
<button id="save">Save!</button>
</script>
Il codice per eseguire questo:
MyModel = Backbone.Model.extend({
urlRoot: "/myModel"
});
MyView = Backbone.View.extend({
template: "#myTemplate",
events: {
"change #first_name": "setFirstName",
"change #last_name: "setLastName",
"click #save": "save"
},
initialize: function(){
_.bindAll(this, "saveSuccess", "saveError");
},
setFirstName: function(e){
var val = $(e.currentTarget).val();
this.model.set({first_name: val});
},
setLastName: function(e){
var val = $(e.currentTarget).val();
this.model.set({last_name: val});
},
save: function(e){
e.preventDefault(); // prevent the button click from posting back to the server
this.model.save(null, {success: this.saveSuccess, error: this.saveError);
},
saveSuccess: function(model, response){
// do things here after a successful save to the server
},
saveError: function(model, response){
// do things here after a failed save to the server
},
render: function(){
var html = $(this.template).tmpl();
$(el).html(html);
}
});
myModel = new MyModel();
myView = new MyView({model: myModel});
myView.render();
$("#someDivOnMyPage").html(myView.el);
Questo vi darà un rapido avvio di una forma che salva un nuovo modello al server.
ci sono un paio di cose il server deve fare:
- restituire un codice di risposta HTTP valida (200 o qualche altra risposta che dice tutto era "ok")
- ritorno JSON che era inviato al server, inclusi tutti i dati che il server ha assegnato al modello, ad esempio un campo
id.
È molto importante che il server esegua queste operazioni e includa un campo id nella risposta. Senza un campo id dal server, il tuo modello non potrà mai aggiornarsi automaticamente quando chiami di nuovo save. Proverà solo a creare nuovamente una nuova istanza sul server.
Backbone utilizza l'attributo id di un modello per determinare se deve creare o aggiornare un modello quando si spingono i dati sul back-end. La differenza tra la creazione di un nuovo modello e il salvataggio di uno è solo l'attributo id. Chiami il save sul modello, che si tratti di un modello nuovo o modificato.
Una cancellazione funziona allo stesso modo - basta chiamare destroy sul modello e lo fa una chiamata al server per fare il distruggere. Con un codice HTML che ha un link o un pulsante "cancella", si dovrebbe allegare all'evento click di quell'elemento HTML lo stesso che ho mostrato per il pulsante "Salva". Quindi, nel metodo di callback per il clic di eliminazione, si chiamerà this.model.destroy() e si passerà qualsiasi parametro desiderato, ad esempio il callback di successo e di errore.
Nota che ho incluso uno urlRoot sul modello. Questa funzione o una funzione url sono necessarie su un modello se il modello non fa parte di una raccolta. Se il modello fa parte di una raccolta, la raccolta deve specificare lo url.
Spero che questo aiuti.
Questo aiuta molto ... Grazie! –
Il metodo 'sync()' ha qualcosa a che fare con 'save()' o sono quelli che si escludono a vicenda? –
È correlato, sì. Quando chiami 'save', alla fine delegherà al metodo' sync'. L'impostazione predefinita è usare il metodo 'Backbone.sync'. Puoi sovrascriverlo fornendo un metodo 'sync' direttamente nella definizione del tuo modello. –