En el artículo anterior estuvimos mostrando cómo crear nuestros primeros modelos y conociendo algunos de los primeros métodos disponibles en BackboneJS. En esa línea, seguiremos hablando de características de los modelos, viendo cuáles son las posibilidades de almacenamiento de propiedades y métodos.

Sin abandonar la sencillez de estas primeras tomas de contacto con el framework, con lo aprendido será suficiente para comenzar a realizar ejemplos un poco más elaborados, que nos aportan mayores variantes para trabajar.

Especificar métodos y propiedades de instancia al crear la clase del modelo

Al crear un modelo con el método "extend()" podemos especificar una serie de propiedades, ya sean funciones o datos, que se copiarán en todas las instancias creadas sobre ese modelo.

Pues bien, extend() nos permite indicarle como parámetro un objeto Javascript y con ello conseguiremos que todas las instancias del modelo tengan las propiedades y métodos de ese objeto Javascript que le estamos pasando.

var ClaseModelo = Backbone.Model.extend({
dato: "Yeah!!",
metodo: function(){
alert("funciona!!");
}
});

Creada esa clase "MiModelo", todas las instancias que creemos a partir de ella, tendrán la propiedad "dato" y el método "metodo".

Esto quiere decir que podríamos instanciar un objeto y que sobre esa instancia podremos acceder a sus propiedades y métodos definidos al hacer el extend().

var objClaseModelo = new ClaseModelo();
alert(objClaseModelo.dato);
objClaseModelo.metodo();

Los datos asociados de esta forma a los objetos son como propiedades nativas de Javascript, de modo que podemos acceder por medio del operador punto ".", como a cualquiera de los métodos y atributos de objeto nativos en Javascript.

Especificar métodos y propiedades de clase al crear la clase del modelo

Por medio del método extend() también podemos indicar propiedades y métodos de clase (llamados habitualmente en POO como propiedades o métodos estáticos), que se asociarán a la clase del modelo, en lugar de las instancias del modelo.

Para definir estos métodos y propiedades de clase tenemos que usar el segundo parámetro del método extend().

var ClaseModelo = Backbone.Model.extend({
propiedadInstancia: "esta no es la que nos interesa ahora"
}, {
propDeClase: "Prop estatica",
metodoDeClase: function(){
alert("este es un método estático o método de clase");
}
});

Los métodos y propiedades estáticos los podemos acceder e invocar a partir del nombre de la clase. Por ello, para acceder en este caso no necesito siquiera tener una instancia, simplemente lo hago a partir del nombre "ClaseModelo".

ClaseModelo.metodoDeClase();
console.log("propiedad de clase: " + ClaseModelo.propDeClase);

Especificar propiedades y métodos al crear el objeto de modelo

Hemos visto que BackboneJS nos permite crear propiedades y métodos para todas las instancias o la clase, al definir la clase del modelo. Sin embargo, al instanciar modelos también podemos definir propiedades y métodos, siendo éstos propios del ejemplar que se está instanciando.

Es más fácil de ver con un ejemplo.

// Creo una clase de modelo
var Modelo = Backbone.Model.extend({});
// instancio un objeto de ese modelo
var objModelo = new Modelo({
dato: "Esto se guardará dentro del modelo"
});

La diferencia en este caso, aparte de que este "dato" solo se está guardando en la instancia creada, es que estará dentro de Backbone como propiedad del modelo y no como propiedad nativa Javascript del objeto.

Siendo una propiedad del modelo controlada por Backbone.js deberemos acceder a través de las funciones "get()" o "set()" para recuperar su valor o cambiarlo, tal como se ve a continuación:

objModelo.get("dato");
objModelo.set("dato", "nuevo valor");

Al estar dentro de la arquitectura de BackboneJS, el framework estará al tanto de este dato, si es que tiene que serializar el modelo. Si se modifica, también estará al tanto para generar el correspondiente evento.

Ejemplo que nos ayudará a diferenciar cómo Backbone aloja los datos en los modelos

Veamos ahora de nuevo esto que acabamos de aprender, pero con un ejemplo un poco más completo. Tenemos tres versiones de un código parecido:

1) En el primer caso hemos creado propiedades de instancia, asociadas al modelo. De este modo, todos los objetos de modelo que se creen tendrán estas propiedades que funcionarán como nativas Javascript.

var MiModelo = Backbone.Model.extend({
dato: "hola mundo MiModelo",
holaModelo: function(){
alert(this.dato);
}
});

var objMiModelo = new MiModelo();
objMiModelo.holaModelo();

Fíjate que dentro del método "holaModelo()" accedemos a la propiedad "dato" con "this.dato".

2) En el segundo caso hemos hecho propiedades de instancia, pero definidas al instanciar un modelo. Estas propiedades solo existirán en el objeto que acabamos de instanciar.

var MiModelo = Backbone.Model.extend({
holaModelo: function(){
alert(this.get("dato"));
}
});

var objMiModelo = new MiModelo({
dato: "Hola mundo Backbone"
});
objMiModelo.holaModelo();

Aquí podrás observar que para acceder al "dato" cargado al crear la instancia se tiene que utilizar el método get().

3) Ahora hemos hecho un tercer ejemplo, en el que ponemos junto el código del primer y segundo caso, de modo que nos demos cuenta que el "dato" creado en un lugar y otro son en realidad distintas variables, aunque se llamen igual.

var MiModelo = Backbone.Model.extend({
dato: "hola mundo MiModelo",
holaModelo: function(){
alert(this.dato);
alert(this.get("dato"));
}
});

var objMiModelo = new MiModelo({
dato: "Hola Al mundo Backbone!!"
});
objMiModelo.holaModelo();

Ahora fíjate que en el método holaModelo() estamos haciendo dos alert() y mostrando dos variables, tanto this.dato como tnis.get("dato") y que ambas variables tienen valores diferentes, lo que nos hace entender que son cosas distintas.

Espero que este ejemplo, aunque sencillo y nuevamente poco útil por sí mismo, nos haya hecho entender cómo podemos asociar datos a un modelo y qué diferencias existen si lo hacemos de una u otra manera.