Tiene la idea correcta y Backbone debería facilitarle las cosas con la misma visión general de alto nivel de su flujo de trabajo. Tenga en cuenta que todavía va a utilizar jQuery para esta funcionalidad; lo hará a través de los aspectos organizativos de los tipos de Backbone.
Hay un par de elementos clave que usted desea en su lugar, la mayoría de los cuales ya se ha mencionado:
- una columna vertebral para perfeccionar la coordinación de los elementos HTML con el código Javascript
- Un modelo de columna vertebral para almacenar todos los datos que la entrada del usuario en los elementos HTML
- Un servidor back-end que puede manejar las llamadas a través de JSON RESTful peticiones AJAX de jQuery
creo que el Lo único que le falta es que el modelo tiene un método save, que completa toda la lógica para llamar a las rutas de creación/actualización en su servidor back-end.El modelo también tiene un método delete para manejar la eliminación del servidor.
Como un ejemplo muy simple, aquí hay un formulario que muestra una plantilla HTML en la pantalla, reúne la entrada del usuario en el modelo y luego la guarda en el servidor.
plantilla
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>
se ejecute el código siguiente:
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);
Esto le dará un comienzo rápido de una forma que ahorra un nuevo modelo de vuelta al servidor.
Hay un par de cosas que su servidor tiene que hacer:
- devolver un código de respuesta HTTP válida (200 o alguna otra respuesta que dice que todo estaba "bien")
- Retorno del JSON que era enviado al servidor, incluidos los datos que el servidor asignó al modelo, como un campo
id.
Es muy importante que su servidor haga estas cosas e incluya un campo id en la respuesta. Sin un campo id del servidor, su modelo nunca podrá actualizarse cuando llame de nuevo al save. Solo intentará crear una nueva instancia en el servidor nuevamente.
Backbone usa el atributo id de un modelo para determinar si debe crear o actualizar un modelo al enviar datos al servidor. La diferencia entre crear un nuevo modelo y guardar uno es solo el atributo id. Llama al save en el modelo, ya sea un modelo nuevo o editado.
Una eliminación funciona de la misma manera: simplemente llama al destroy en el modelo y hace una devolución al servidor para hacer la destrucción. Con un poco de HTML que tiene un enlace o botón "eliminar", se adjuntaría al evento click de ese elemento HTML de la misma manera que lo he mostrado para el botón "Guardar". Luego, en el método de devolución de llamada para el clic de eliminación, debe llamar al this.model.destroy() y pasar los parámetros que desee, como el éxito y las devoluciones de errores.
Tenga en cuenta que también incluí un urlRoot en el modelo. Esto o una función url son necesarios en un modelo si el modelo no es parte de una colección. Si el modelo es parte de una colección, la colección debe especificar el url.
Espero que ayude.
Esto ayuda mucho ... ¡Gracias! –
¿El método 'sync()' tiene algo que ver con 'save()' o son mutuamente excluyentes? –
Está relacionado, sí. Cuando llames a 'save', eventualmente delegará en el método' sync'. El valor predeterminado es usar el método 'Backbone.sync'. Puede anular esto al proporcionar un método 'sync' directamente en la definición de su modelo. –