Caracteristicas de Kendo MVVM

Explicamos algunas características relativas al framework Javascript Kendo MVVM.

En el capítulo anterior de esta serie explicamos el patrón "Model-View-ViewModel" y vimos un ejemplo de su utilización en un entorno web gracias al framework Javascript Kendo.

En este artículo vamos a explicar algunas de las características relativas a este framework.

ObservableObject

Este objeto es la base del patrón MVVM, ya que es el "viewmodel" que vamos a utilizar para enlazar con nuestras vistas y nos permite llevar cabo el control de cambio en las propiedades de nuestro objeto.

Para definir nuestro "viewmodel" lo podemos realizar de las dos siguientes maneras:

New kendo.data.ObservableObject:
var viewModel = new kendo.data.ObservableObject({
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer',
Greeting: function () {
alert('Good Morning');
}
});


Kendo.observable:
var viewModel = kendo.observable({
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer',
Greeting: function () {
alert('Good Morning');
}
});
Este segundo método realizará internamente una instancia de "kendo.data.ObservableObject", por lo que son dos definiciones iguales.

Para modificar las propiedades, o simplemente para poder acceder a ellas, es necesario realizarlo a través de los métodos "set" o "get" que vienen dados gracias al objeto "ObservableObject". Vamos a ver unos ejemplos:

Establecer una propiedad:

viewModel.set(‘Name’,’Alvaro Torrecilla’);

Acceder al valor de la propiedad:

viewModel.get(‘Name’);

Del mismo modo que se realiza con propiedades simples, lo podríamos realizar con otros objetos que sean propiedades de nuestro viewmodel, es decir, si tenemos otras clases complejas dentro:

Establecer una propiedad:

viewModel.set(‘Coche.Marca’,’Seat’);

Acceder al valor de la propiedad:

viewModel.get(‘Coche.Marca’);

ObservableArray

Este objeto nos permite tener un array de Javascript, pero con las ventajas del control de cambio en las propiedades del mismo modo que se tiene en "ObservableObject".

Tal y como indicábamos con ObservableObject, también tenemos dos formas de llevar a cabo la definición de "ObservableArray" en nuestro código:

New kendo.data.ObservableObject:
var listModel = new kendo.data.ObservableArray([{
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer',
Greeting: function () {
alert('Good Morning');
}
},{
Name: Alvaro Torrecilla',
Age: 3,
Description: ‘Student’,
Greeting: function () {
alert('Good Morning');
}
}
]);

Kendo.observable:
var listModel = kendo.observable(([{
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer',
Greeting: function () {
alert('Good Morning');
}
},{
Name: Alvaro Torrecilla',
Age: 3,
Description: ‘Student’,
Greeting: function () {
alert('Good Morning');
}
}
]);

El segundo método se encargará de realizar una instancia de "ObservableArray", generando objetos completamente iguales ambas definiciones.

Binding

El binding es el enlace que vamos a realizar entre elementos HTML y las propiedades de nuestro "viewmodel".

Para realizar el enlace vamos a utilizar el atributo “data-bind”, donde almacenaremos en una cadena de texto la propiedad que queremos enlazar y su valor de la siguiente manera:

<label data-bind='text: Name'></label>

En este ejemplo, estamos enlazando la propiedad "Text" del objeto "Label" a la propiedad "Name" de nuestro "viewmodel".

Dentro de la propiedad "data-bind" podremos indicar tantos “bindings” como deseemos separándolos por “,” e indicando las distintas propiedades y valores a los que queramos hacer referencia:

<label data-bind='text: Name,visible:IsNameVisible'></label>

Los atributos “preestablecidos” que nos permiten definir un binding son los siguientes: “Attr”, Checked, Click, Disabled, Enabled, Style, Text, Value, Visible, Html, Source o Events. Vamos a ver alguno de ellos más en detalle:

Attr
El binding a través de la propiedad "Attr" nos va a permitir el enlace a propiedades de cualquier propiedad del elemento indicado, y además nos va a permitir establecer el valor de elementos propios de HTML5 (data-xxx):

<img id="logo" data-bind="attr: { src: ImageUrl, alt: ImageAlt }" />
<div data-bind="attr: { data-content: Content }"></div>

Events
Una característica interesante que se puede definir con el binding es el enlace a eventos de un elemento del DOM, donde el método enlazado se llevará a cabo en el momento de producirse el evento indicado.

<input type=”text” data-bind=’value:Name,events:{click:Greeting}’/>

Source
Otra característica muy interesante viene dada gracias a propiedades de tipo "Array", es decir, cuando vamos a enlazar a un número "n" de elementos del mismo tipo.

Para aprovechar esta característica es necesario que hagamos uso de la definición de plantillas para indicar cómo será la visualización de los datos:

<script id="UserTemplate" type="text/x-kendo-template">
<li>
<img id="logo" data-bind="attr: { src: ImageUrl, alt: ImageAlt }" />
<span data-bind="text: Name"></span>
</li>
</script>

Después será necesario definir el atributo "data-template" y asignarle la plantilla que hemos definido

<ul data-template="UserTemplate" data-bind="source: Users">
</ul>

Si necesitamos realizar un enlace y no podemos hacer uso de los que hemos indicado anteriormente, KENDO nos brinda la posibilidad de definir nuestros Bindings personalizados.

Custom Binding

Para definir nuestro propio binding personalizado, es necesario extender el objeto "kendo.data.Binder". Podremos llevar a cabo de binding de 1 dirección (refrescar la vista) o bidireccional (refrescar vista y modelo).

Para poder utilizar nuestros binding personalizados es muy importante definirlos antes de utilizarlos.

1 Dirección:
Vamos a definir un binding llamado fade para propiedades de tipo “Bool” cuando la propiedad sea “True” hará un fadeIn, en caso contrario hará un fadeOut. Con este binding, solo vamos a refrescar la vista por lo tanto el valor del viewmodel no se verá afectado.

kendo.data.binders.fade = kendo.data.Binder.extend({
refresh: function() {
var value = this.bindings["fade"].get();

if (value) {
$(this.element).fadeIn();
} else {
$(this.element).fadeOut();
}
}
});

2 Direcciones:
Vamos a definir otro binding de tipo “bool”, en este caso vamos a permitir que se modifique tanto la vista (al cambiar el viewModel) como el viewmodel (al cambiar la vista).

kendo.data.binders.bool = kendo.data.Binder.extend({
init: function(element, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, element, bindings, options);

var that = this;
//listen for the change event of the element
$(that.element).on("change", function() {
that.change(); //call the change function
});
},
refresh: function() {
var that = this,
value = that.bindings["bool"].get();
$(that.element).val(value);
},
change: function() {
var value = this.element.value;
this.bindings["bool"].set(value);
}
});

Conclusiones

Con estos dos artículos hemos visto una pequeña introducción al uso del patrón MVVM dentro del desarrollo web con el framework Kendo de Telerik.

Del mismo modo, hemos visto algunas de las características más interesantes que provee este framework, como los binding, los binding personalizados o el uso de templates.

Espero que os sea de utilidad.

Enlaces de Referencia

Kendo MVVM: docs.kendoui.com/tutorials/mvvm-in-kendo-ui
Demos: demos.kendoui.com/web/mvvm