每次在Meteor中渲染时都会对模板进行脉冲处理

Question

我希望每次渲染时都有每个模板脉冲.有一个可视化调试工具来查看正在呈现的内容.所以我想象一下这样的东西,当一个模板(一个小片段)被渲染,它的背景颜色被设置为红色,然后这个红色慢慢变成原始背景颜色或任何背景(即使它是透明的).因此,如果我发现某些东西一直都是红色,我知道它一直在被重绘.

Answer 1

基于@Hubert OG 的代码和这篇博文的想法，我为 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 @