0

Estoy realizando un proyecto en el cuál un usuario puede dar votos positivos o negativos a cada elemento, en este saco, sitios web, y que filtra los resultados de mayor a menor número de votos.

El problema viene cuando un elemento adquiere mas votos que otro, la plantilla es reactiva por lo cuál cambia inmediatamente de posición el elemento, y lo que necesito es que haya una animación retardada para que sea mas cómodo visualmente para el usuario.

El código de la plantilla es este principal es este:

Template.sites_listing.helpers({
    websites: function () {

        if (Session.get("userFilter")) {// they set a filter!
            // return Websites.find({createdBy: Session.get("userFilter")}, {sort: {createdOn: -1, rating: -1}});
        }
        else {
            return Websites.find({}, {sort: {'votes.Up': -1}});
        }

    }
});

Y este es el código del evento de la plantilla de cada objeto:

Template.website_item.events({
    "click .js-upvote": function (event) {
        var website_id = this._id;
        console.log("Up voting website with id " + website_id);

        Websites.update({_id: website_id},
            {$inc: {'votes.Up': 1}});


        return false;
    },
    "click .js-downvote": function (event) {
        var website_id = this._id;
        console.log("Down voting website with id " + website_id);

        Websites.update({_id: website_id},
            {$inc: {'votes.Down': 1}});

        return false;
    }
});

He encontrado un ejemplo del código pero no sé como condicionarlo para que al momento de actualizar la plantilla y mover un elemento por encima del otro pueda agregar una animación:

// use jquery to hide the image component
   // then remove it at the end of the animation
   $("#"+image_id).hide('slow', function(){
    Images.remove({"_id":image_id});
   }) 

Alguién tiene idea de como hacer esto?

1

1 respuesta 1

1

Hola te recomiendo que eso eventos de rende rizado los hagas directamente en

Template.website_item.events({
    "click .js-upvote": function (event) {
        var website_id = this._id;
        Session.set('idImage', website_id); 
        console.log("Up voting website with id " + website_id);

        Websites.update({_id: website_id},
            {$inc: {'votes.Up': 1}});


        return false;
    },
    "click .js-downvote": function (event) {
        var website_id = this._id;
        Session.set('idImage', website_id); 
        console.log("Down voting website with id " + website_id);

        Websites.update({_id: website_id},
            {$inc: {'votes.Down': 1}});

        return false;
    }
});

Template.sites_listing_new.rendered = function() {
   var image_id = Session.get('idImage'); 
   $("#"+image_id).hide('slow', function(){
    Images.remove({"_id":image_id});
   }) 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.