मेटीर

Question

में हर बार टेम्पलेट को पल्स करें जब भी यह हर बार टेम्पलेट पल्स को प्रस्तुत किया जाता है। क्या प्रस्तुत किया जा रहा है यह देखने के लिए एक दृश्य डीबगिंग उपकरण है। तो मैं ऐसा कुछ कल्पना करता हूं जब एक टेम्पलेट (एक छोटा सेगमेंट) प्रदान किया जाता है, इसका पृष्ठभूमि रंग लाल पर सेट होता है और फिर यह लाल रंग धीरे-धीरे मूल पृष्ठभूमि रंग में फिसल जाता है या पृष्ठभूमि जो कुछ भी था (भले ही यह पारदर्शी था)। तो अगर मैं देखता हूं कि कुछ समय लाल है, तो मुझे पता है कि इसे हर समय फिर से खींचा जा रहा है।

Answer 1

@Hubert ओजी से कोड और this blog post से एक विचार के आधार पर मैंने उल्का प्रतिपादन के लिए निम्नलिखित डिबगिंग कोड बनाया करना चाहते हैं:

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); 
}