Sie sind auf Seite 1von 6

Ejemplo BackBone.

js:

HelloWorldBackbone.html

< div id = " area " >

< label for = " alto " > Alto </ label >

< input id = " alto " name = " alto " value = " " >

< label for = " ancho " > Ancho </ label >

< input id = " ancho " name = " ancho " value = " " >

< div id = " resultado " style = " margin-top: 2em " > </ div >

</ div >

main-1.js

var Rectangulo = Backbone . Modelo . extender ({

valores predeterminados : {

alto : 4 ,

ancho : 3 ,

},

area : function () {

devolver este . get ( ' alto ' ) * esto . get ( ' ancho ' );

},

toTemplateJSON : function () {

var json = esto . toJSON ();

json . área = esto . área ();

devolver json;

});

main-2.js

var Vista = Backbone . Ver . extender ({

el : ' #area ' ,


eventos : {

" change input [name = 'alto'] " : ' onChangeAlto ' ,

" change input [name = 'ancho'] " : ' onChangeAncho '

},

initialize : function () {

_ . bindAll ( this , ' render ' , ' onChangeAlto ' , ' onChangeAncho ' );

esta . modelo = nuevo Rectangulo ();

esta . modelo . on ( ' cambio ' , este . render );

esta . render ();

},

onChangeAlto : function () {

var v = parseInt ( $ ( " input [name = 'alto'] " , this . el ). val ());

esta . modelo . set ( ' alto ' , v);

},

onChangeAncho : function () {

var v = parseInt ( $ ( " input [name = 'ancho'] " , this . el ). val ());

esta . modelo . set ( ' ancho ' , v);

},

render : function () {

$ ( " entrada [nombre = 'alto'] " , esto . el ). val ( este . modelo . get ( ' alto ' ));

$ ( " entrada [nombre = 'ancho'] " , esto . el ). val ( este . modelo . get ( ' ancho ' ));
var texto = Bigote . render ( ' El área de un rectángulo de alto {{alto}} y ancho
{{ancho}} es <b> {{área}} </ b> ' , este . modelo . toTemplateJSON ());

$ ( ' #resultado ' , esto . el ). html (texto);

},

});
Ejemplo Moment.js:

<
html
>
< head >
< title > en un Moment.js </ title >
</ head >

< cuerpo >


< h1 > Moment.js aquí ahora: < span id = " then " data-date = " sáb 24
mar 2012 08:42:14 GMT-0400 (EDT) " > </ span > </ h1 >

< script src = "


http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > < / script
>
< script src = " /js/moment.js " > < / script >
< script >
$ ( documento ). listo ( función () {
var then = $ ( ' #then ' ),
fecha = momento ( nueva fecha ( luego . attr ( ' data-date
' ))),
update = function () {
a continuación . html ( fecha . fromNow ());
};

actualización ();
setInterval (actualización, 60000 );
});
< / script >
</ body >

</ html >


El uso de fechas para cualquier lenguaje de programación es algo básico y en JS,
siendo del lado del usuario, su uso, validación e internacionalización es más que
importante.

El objeto Date de JavaScript es bastante básico y aunque hay clases que


extienden sus funcionalidades aún no es suficiente. Para ello existe una librería
muy útil llamada momentjs.

La documentación esta bastante bien pero aún así hay muchos ejemplos que no
me quedan claros. Por ejemplo a la hora de crear un nuevo objeto lo podemos
hacer de la siguiente forma:

moment (value, "MM/DD/YYYY")

o con varios formatos posibles

moment (value, ["MM/DD/YYYY", “DD/MM/YYYY”])

Es muy importante que las letras sean en mayúsculas porque el horario se define
con letras en minúscula por ejemplo m.format('MM/DD/YYYY HH:mm'), asumiendo
que m es la variable resultante del constructor anterior.

Se pueden concatenar funciones por ejemplo si queremos validar un campo de un


formulario con un formato de fecha específico nos valdría lo siguiente: moment
(value, ["MM/DD/YYYY"]).isValid().

Utilizando zonas horarias con momentjs


Si incluimos el plugin para zonas horarias (en mi caso moment-timezone-with-
data-0.2.4.min.js) podremos crear fechas para una detarminada región y cambiarla
de manera dinámica, por ejemplo, creemos una fecha en UTC (GMT)
var e = moment.tz(value, "MM/DD/YYYY", "UTC");

Y cambiémosla a la de Perú formateándola para que nos de la hora

e.tz('America/Lima').format('MM/DD/YYYY HH:mm')

Al igual que con Date se pueden comparar objetos momentjs con los operadores
aritméticos normales (<, >, =).

Utilizando rangos de fechas


Junto con las zonas horarias el uso de rangos o intervalos de fechas me parece
genial y muy práctico, lo podemos utilizar gracias al plugin adicional moment-
range.js.

Primero debemos declarar el rango

var range = moment (). range (desde, hasta);

Donde las variables desde y hasta son objetos momentjs. Para comprobar si una
fecha está en el rango, definimos la fecha como un objeto momentjs y ejecutamos
la siguiente función:

if(range.contains(date)){
}
else{
}

Das könnte Ihnen auch gefallen