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