Está en la página 1de 10

Tema 4: MVC en el cliente con Javascript

Parte II:
Ms sobre
backbone.js
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Qu vamos a ver hoy?
Algunos servicios que Backbone da a los modelos
Infraestructura de validacin
Sincronizacin de los modelos con REST
Templates para simplicar las vistas
Vistas y subvistas
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Validacin
Con {validate:true} al jar una propiedad, o en el save()
var Libro = Backbone.Model.extend({
validate: function() {
var errores = new Array();
if (this.get('titulo')==undefined)
errores.push("El ttulo no puede estar vaco")
if (this.get('autor')==undefined)
errores.push("El autor no puede estar vaco")
if (errores.length>0)
return errores;
},
initialize: function() {
this.on("invalid", function(modelo, errores) {
for(i=0; i<errores.length; i++) {
console.log(errores[i])
}
})
}
});
var l = new Libro()
//disparar los errores
l.set('lala','esto qu es', {validate:true})
//idem. Como veremos, esto guarda el modelo en el servidor mediante REST
l.save()
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Sincronizacin con REST
Especicamos una URL base para la coleccin
Backbone nos ofrece mtodos sencillos que implementan CRUD de
los modelos de la coleccin. Asumir que el servidor sigue las
convenciones REST
var Biblioteca = Backbone.Collection.extend({
model: Libro,
url: "/api/libros",
...
})
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Obtener los modelos del servidor
Backbone estar lanzando un GET a la URL base de la coleccin
Si no se especica reset, los contenidos actuales de la coleccin se mezclarn
con los del servidor. Backbone presupone que todos los objetos que estn en el
servidor tienen un campo id, identicador nico.
Se pueden pasar callbacks de xito y error de la peticin (consultar documentacin)
var Biblioteca = Backbone.Collection.extend({
model: Libro,
url: "/api/libros",
...
})
var miBiblio = new Biblioteca()
miBiblio.fetch({reset:true})
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Guardar un modelo
Hay que aadirlo antes a la coleccin
Si el modelo no pertenece a ninguna coleccin usamos directamente save(),
pero en ese caso debemos denir su URL base con la propiedad urlRoot
Si el modelo no exista en el servidor se lanzar un POST. Backbone
espera que en la respuesta venga el modelo creado en JSON
Usa el campo id de la respuesta para asignar un id al modelo y saber que ya
existe en el servidor
Es una convencin que muchos APIs REST no usan
Si el modelo ya exista en el servidor se lanzar un PUT a la URL
base + id
var miBiblio = new Biblioteca()
var l = new Libro({titulo: "Juego de tronos", autor: "George
R.R.Martin"})
miBiblio.add(l)
l.save()
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Eliminar un modelo
destroy() elimina el modelo de la coleccin y lanza un DELETE a
la URL base + id
var miBiblio = new Biblioteca()
miBiblio.fetch();
...
var libro1 = miBiblio.get(1)
libro1.destroy()
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Son operaciones asncronas
Cuidado! las operaciones CRUD lanzan peticiones AJAX y por tanto
son asncronas. Es decir, no podemos asumir que justo despus de
ejecutar una operacin ya se haya realizado
Para saber cundo ha terminado la operacin podemos usar
eventos (consultar documentacin de backbone para ver la lista de
eventos, http://backbonejs.org/#Events)
var miBiblio = new Biblioteca()
miBiblio.fetch({reset:true})
miBiblio.get(1) //probablemente el modelo todava no est!!
miBiblio.on(reset, procesarColeccion)
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Templates vs concatenar HTML
Hasta ahora cuando queramos generar en Javascript HTML con
una parte ja y una variable lo hacamos concatenando cadenas
Es mucho ms limpio usar templates, como hacemos en el
servidor con Mustache
De hecho, existe implementacin Mustache para Javascript (varias, incluso!)
var html = '<a href="' + miURL + '">' + miTexto + '</a>'
var tmpl = Mustache.compile('<a href="{{miURL}}"> {{miTexto}} </a>')
//tmpl se convierte en una funcin que al pasarle los datos nos //
//devuelve el HTML
var html = tmpl({miURL:http://www.ua.es", miTexto:UA})
Aplicaciones Distribudas en Internet 2013-14 / Univ. Alicante
Dnde guardar los templates
Si los fragmentos de HTML son muy grandes, sigue siendo
engorroso pasrselos como argumento directamente a compile.
Un truco muy usado es almacenarlos como un <script> de tipo
no interpretable por el navegador

<script id="miTmpl" type="text/template">


<h1>Bienvenido a {{sitio}}</h1>
<h2>Querido {{nombre}}, .... </h2>
<div> .... </div>
</script>
var tmpl = Mustache.compile(document.getElementById("miTmpl")).innerHTML

También podría gustarte