viernes, abril 27, 2012

Introducción a jQuery (Parte 12)

En esta ocasión no grabe un screencast, ya que solo voy a reacomodar código en base a lo explicado en los pasados posts. Creo que será más fácil apreciar esos cambios si lo muestro como estaba el código y como fue cambiando. Así pueden ver los detalles sin tener que esperar a que lo escriba.

En la parte 11 de la serie el archivo tasks.js iba de la siguiente forma:

$( function () {
$( 'input[type="checkbox"]' ).click( function ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
} );

// $( "li" ).click( function () {
// $( this ).toggleClass( "highlight" );
// } );

$( "ol" ).on( "click", "li", function () {
$( this ).toggleClass( "highlight" );
} );

$( "a.delete" ).click( function ( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
} );

$( "button#add" ).click( function () {
var $input = $( "input#task" );
var value = $input.val();

var $ol = $( "ol" );

var templateHtml = $( "div.template" ).html();

$ol.append( templateHtml.replace( "{{task}}", value ) );
} );

} );


Expliqué el uso de “on” en lugar de usar “click” directamente en los eventos, así que lo primero que haré es cambiar los “clicks” por “on” y borrar los comentarios del código.



$( function () {
$( "ol" ).on( "click", 'input[type="checkbox"]' , function ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
} );

$( "ol" ).on( "click", "li", function () {
$( this ).toggleClass( "highlight" );
} );

$( "ol" ).on( "click", "a.delete", function ( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
} );

$( "button#add" ).click( function () {
var $input = $( "input#task" );
var value = $input.val();
var $ol = $( "ol" );
var templateHtml = $( "div.template" ).html();
$ol.append( templateHtml.replace( "{{task}}", value ) );
} );

} );


Aquí se puede ver que se esta usando varias veces el selector $( “ol” ) lo cual puede guardarse en una variable y no tener que hacer la consulta al DOM cada vez que lo necesitamos.



$( function () {
var $ol = $( "ol" );

$ol.on( "click", 'input[type="checkbox"]' , function ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
} );

$ol.on( "click", "li", function () {
$( this ).toggleClass( "highlight" );
} );

$ol.on( "click", "a.delete", function ( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
} );

$( "button#add" ).click( function () {
var $input = $( "input#task" );
var value = $input.val();
var templateHtml = $( "div.template" ).html();
$ol.append( templateHtml.replace( "{{task}}", value ) );
} );
} );


Por último voy a dejar de usar funciones anónimas y especificar el ligado de los eventos en un solo lugar. Además guardo en una variable la caja de texto para agregar tareas y así no tener que buscarla cada que se necesite agregar una tarea:



$( function () {
var $ol = $( "ol" ),
$newTask = $( "input#task" );

function checkbox_click ( event ) {
$( this ).parent().toggleClass( "done", this.checked );
event.stopPropagation();
}

function hightlight() {
$( this ).toggleClass( "highlight" );
}

function deleteItem( event ) {
if ( confirm( '¿Borrar la tarea?' ) ) {
$li = $( this ).parent();
$li.slideUp( function () { $li.remove(); } );
}
event.stopPropagation();
}

function addItem () {
var templateHtml = $( "div.template" ).html();
$ol.append( templateHtml.replace( "{{task}}", $newTask.val() ) );
}

$ol.on( "click", 'input[type="checkbox"]', checkbox_click );
$ol.on( "click", "li", hightlight);
$ol.on( "click", "a.delete", deleteItem);
$( "button#add" ).click( addItem );
} );


Con esto, en mi opinión, el código se ve más claro.



Links Relacionados:

Introducción a jQuery (Parte 11)



Mario H. Cornejo

lunes, abril 23, 2012

Introducción a jQuery (Parte 11)

Esta vez hago uso de una plantilla para agregar nuevas tareas a la lista y empiezo a utilizar el método “on” para ligar eventos.

Links Relacionados:
Introducción a jQuery (parte 10)
Introducción a jQuery (parte 12)

Iniciando tijuana.js

Recientemente el uso de JavaScript ha cobrado importancia al momento de realizar casi cualquier aplicación web. Ahora hay muchas librerías y/o Frameworks desarrollados en JavaScript y empieza a no ser extraño usarlo fuera del browser.

En el pasado Super Happy Dev House Tijuana se reunieron varios desarrolladores a trabajar en diversos proyectos. Cada uno de estos proyectos estaban desarrollados en diferentes lenguajes/Frameworks (tales como RubyOnRails, PHP, ASP.NET, etcétera). Se contó con la asistencia de varias de las comunidades de la región, como la comunidad de Ruby Tijuana, Tijuana .Net, Grupo de usuarios GNU/Linux, Comunidad de PHPeros en Tijuana y Google Developer Group.

WP_000405WP_000407WP_000408

A pesar de ser desarrolladores de diversas tecnologías algo que tienen estas comunidades en común es JavaScript. De ahí la idea de iniciar un grupo donde podemos reunirnos para hablar de lo que todos los desarrolladores web tenemos en común y que cada vez tiene mayor impacto en el desarrollo de las aplicaciones.

He publicado el sitio tijuanajs.org donde espero sea un punto de encuentro para todas aquellas personas, de la región, que les guste hablar de JavaScript.

Ingresen al grupo y espero verlos en las reuniones.

Mario H. Cornejo