Pulse pattern every time it is displayed in Meteor

Question

I would like to have every momentum of the template every time it is displayed. So that the visual debugging tool displays what is displayed. Thus, I imagine something like this when displaying a template (small segment), its background color is set to red, and then this red color slowly disappears in the original background color or on some background (even if it was transparent). Therefore, if I see that something is always red, I know that he is constantly redrawing.

Answer 1

Based on the code from @Hubert OG and the idea of this blog post , I made the following debugging code for 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

It just blinks. Animated background color requires additional libraries, see 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; } } 

Now, for each template you want to use, do

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