Làm mẫu xung quanh mỗi khi được hiển thị trong Meteor

Question

Tôi muốn có mọi mẫu xung mỗi khi nó được hiển thị. Để có công cụ gỡ lỗi trực quan để xem nội dung đang được hiển thị. Vì vậy, tôi tưởng tượng một cái gì đó như thế khi một mẫu (một đoạn nhỏ) được trả lại, màu nền của nó được đặt thành màu đỏ và sau đó màu đỏ này dần dần biến thành màu nền gốc hoặc bất kỳ nền nào (ngay cả khi nó trong suốt). Vì vậy, nếu tôi thấy rằng một cái gì đó là tất cả các thời gian màu đỏ, tôi biết rằng nó đang được vẽ lại tất cả các thời gian.

Answer 1

Dựa trên mã từ @Hubert OG và một ý tưởng từ this blog post, tôi thực hiện các mã sửa lỗi sau đây cho Meteor rendering:

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

Đây là một cú nhấp nháy đơn giản. Màu nền hoạt ảnh yêu cầu thư viện bổ sung, xem 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; 
    } 
} 

Bây giờ, đối với mỗi mẫu mà bạn muốn sử dụng này, làm

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