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