Ir al contenido principal

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

Comentarios

Entradas más populares de este blog

Bloqueos

Una de las preguntas típicas de las juntas matutinas en los equipos de desarrollo de software es ¿Hay algún bloqueo? Si lo hay, se trata de ver qué es lo que está esperando esa persona y encontrar la forma de que se desbloquee; pero ¿Qué son los bloqueos? Los bloqueos son obstáculos que te impiden realizar o avanzar en tu trabajo. Evitan que puedas seguir progresando en el proyecto.

He notado que es común en las personas con menos experiencia decir que tienen un bloqueo cuando están batallando, debido a su poca experiencia, en la forma de resolver un problema. Han intentado varias formas y se empiezan a quedar sin ideas de como puede ser resuelto el problema o como pueden cumplir con el requerimiento especificado. Al quedarse sin opciones de qué intentar dicen que tienen un bloqueo con la tarea y que a menos que alguien les diga como resolverlo, no se puede avanzar en la tarea.

En personas con más experiencia, ese tipo de bloqueos no ocurren, una persona con experiencia ha visto pro…

Firebird 2.1 UPDATE OR INSERT

Another great feature that I like in Firebird 2.1 is the UPDATE OR INSERT statement. It's a really time saver and it makes the SQL cleaner.

For example suppose I have a products table like the one I use in my last post and an inventory table to store the product stock. Before Firebird 2.1 if I want to set the stock for a product I needed to check if a record for that product_id already exists; if the product_id already exists then I write an update. If not then I write an insert statement. So I ended up with something like this:


IF EXISTS(SELECT * FROM inventory WHERE product_id = :product_id ) THEN
UPDATE
inventory
SET
stock = :stock
WHERE
product_id = :product_id;
ELSE
INSERT INTO inventory
(product_id, stock)
VALUES
(:product_id, :stock);

In this example I only update one field but when I have to update a big table I ended up with a big chunk of code and thinking: "there should be another (better) way to do this".

Fortunately now with Firebird 2.1 there…

Database Mail en MS SQL Server 2005

Configuración de Database Mail en MS SQL Server 2005

Primero se debe de habilitar, ya que por omisión el componente esta deshabilitado, Utilizando el SSMS (SQL Server Management Studio)


Si no esta habilitado aparecerá un mensaje preguntado si lo habilita, después aparece esta ventana donde se pregunta al usuario que es lo desea hacer.


Seleccionamos la primera opción para crear un perfil.


Configuramos el perfil y le agregamos por lo menos una cuenta.


Seleccionamos el perfil como public y default.


Para mandar correo se utiliza el procedimiento msdb.sp_send_dbmail por lo tanto el usuario que intente mandar correo debe de tener permiso para la base de datos msdb.

Referencias:
http://www.sqlservercentral.com/columnists/cBunch/introtodatabasemailinsql2005.asp