Pulire il modello ogni volta che viene eseguito il rendering in Meteor

Question

Mi piacerebbe avere ogni modello a impulsi ogni volta che viene eseguito il rendering. Per avere uno strumento di debug visivo per vedere cosa viene reso. Quindi immagino qualcosa del genere quando viene reso un modello (un piccolo segmento), il suo colore di sfondo è impostato su rosso e quindi questo colore rosso si attenua lentamente nel colore di sfondo originale o qualunque sia lo sfondo (anche se era trasparente). Quindi se vedo che qualcosa è tutto il tempo rosso, so che viene ridisegnato tutto il tempo.

Answer 1

Sulla base del codice @Hubert OG e un'idea da this blog post, ho fatto il seguente codice di debug per il rendering Meteor:

pulseNode = (i, node) -> 
    return unless node.style 

    $node = $(node) 
    prePulseCss = $node.data('prePulseCss') ? node.style.cssText 
    prePulseBackgroundColor = $node.data('prePulseBackgroundColor') ? $node.css('backgroundColor') 
    $node.data(
    'prePulseCss': prePulseCss 
    'prePulseBackgroundColor': prePulseBackgroundColor 
).css('backgroundColor', 'rgba(255,0,0,0.5)').stop('pulseQueue', true).animate(
    backgroundColor: prePulseBackgroundColor 
    , 
    duration: 'slow' 
    queue: 'pulseQueue' 
    done: (animation, jumpedToEnd) -> 
     node.style.cssText = prePulseCss 
).dequeue 'pulseQueue' 

pulse = (template) -> 
    $(template.firstNode).nextUntil(template.lastNode).addBack().add(template.lastNode).each pulseNode 

_.each Template, (template, name) -> 
    oldRendered = template.rendered 
    counter = 0 

    template.rendered = (args...) -> 
    console.debug name, "render count: #{ ++counter }" 
    oldRendered.apply @, args if oldRendered 
    pulse @ 

Answer 2

Ecco un semplice battito di ciglia. L'animazione del colore di sfondo richiede librerie aggiuntive, vedere jQuery animate backgroundColor.

var pulseNode = function(node) { 
    if(!node.style) return; 
    var prev = node.style['background-color'] || 'rgba(255,0,0,0)'; 
    $(node).css('background-color', 'red'); 
    setTimeout(function() { 
     $(node).css('background-color', prev); 
    }, 1000);    
}; 

pulse = function(template) { 
    for(var node = template.firstNode; true; node = node.nextSibling) { 
     pulseNode(node); 
     if(node === template.lastNode) return; 
    } 
} 

Ora, per ogni modello che si desidera utilizzare questo, do

Template.asdf.rendered = function() { 
    pulse(this); 
}