Pulse die Vorlage jedes Mal, wenn es in Meteor gerendert wird

Question

Ich möchte jede Vorlage Puls jedes Mal, wenn es gerendert wird. Um ein visuelles Debugging-Tool zu haben, um zu sehen, was gerendert wird. Ich stelle mir so etwas vor, wenn eine Vorlage (ein kleines Segment) gerendert wird, ihre Hintergrundfarbe auf Rot gesetzt wird und diese rote Farbe langsam in die ursprüngliche Hintergrundfarbe oder den Hintergrund übergeht (auch wenn es transparent ist). Wenn ich also sehe, dass etwas immer rot ist, weiß ich, dass es ständig neu gezeichnet wird.

Answer 1

Basierend auf dem Code von @Hubert OG und eine Idee von this blog post, ich folgende Debugging-Code für Meteor-Rendering gemacht:

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

Hier ist ein einfaches Blinzeln. Das Animieren der Hintergrundfarbe erfordert zusätzliche Bibliotheken, siehe 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; 
    } 
} 

nun für jede Vorlage, möchten Sie diese verwenden, tun

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