Question

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

Answer 1

根据@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 @

Answer 2

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

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

2 个答案: