每次在 Meteor 中渲染模板时脉冲

Posted 2023-03-08

【中文标题】每次在 Meteor 中渲染模板时脉冲

【英文标题】：Pulse the template every time it is rendered in Meteor

【发布时间】：2013-07-15 20:38:29

【问题描述】：

我希望每次渲染时都有每个模板脉冲。拥有一个可视化调试工具来查看正在渲染的内容。所以我想象当一个模板（一小段）被渲染时，它的背景颜色被设置为红色，然后这个红色慢慢地淡入原始背景颜色或任何背景颜色（即使它是透明的）。因此，如果我看到某些东西一直是红色的，我就知道它一直在被重绘。

【参考方案1】：

这是一个简单的眨眼。动画背景颜色需要额外的库，请参阅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;
    

现在，对于您要使用的每个模板，请执行此操作

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

【讨论】：

如果你使用jQuery来设置静态CSS，你也可以使用animate，不需要额外的库，不是吗？

我遇到的问题是它没有将背景恢复到原始状态。

【参考方案2】：

基于@Hubert OG 的代码和this blog post 的一个想法，我为 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 @