2014-04-07 7 views
8

मैं UI.render() और UI.insert() का उपयोग करके टेम्पलेट्स डाल रहा हूं।उल्का में डाला गया टेम्पलेट निकालें 0.8.0

जब मैंने डाले गए टेम्पलेट को हटाने का प्रयास किया, तो यह स्मृति में रहना प्रतीत होता है और नष्ट विधि को नहीं कहा जाता है।

प्रलेखन के अनुसार, यदि मैं तत्व को निकालने के लिए jquery का उपयोग करता हूं तो इसे संपत्ति को साफ करना चाहिए।

test.html:

<head> 
    <title>removeTest</title> 
    <style> 
     #content { 
      height: 500px; 
      width: 500px; 
      background-color: gray; 
     } 
    </style> 
</head>  

<body><div id="content"></div></body>  

<template name="foo"><div id="{{id}}">Foo</div></template> 

test.js:

if (Meteor.isClient) { 
    UI.body.events({ 
     "click": function(event) { 
      var instance = UI.renderWithData(Template.foo, { }); 
      UI.insert(instance, $("#content")[0]); 
     } 
    });  

    Template.foo.created = function() { 
     this.data.id = "handle"; 
     var self = this; 
     this.x = setInterval(function() { console.log("running...") }, 1000); 
     setTimeout(function() { $("#handle").remove() }, 1000); 
    };  

    Template.foo.destroyed = function() { 
     // never called. 
     clearTimeout(this.x); 
    }; 
} 

क्या मैं गलत क्या किया

मैं निम्नलिखित कोड का उपयोग कर परीक्षण कर रहा हूँ?

धन्यवाद।

+0

क्या आप हैंडलबार के बजाय मैन्युअल रूप से टेम्पलेट को प्रतिपादित क्यों कर रहे हैं, इस बारे में अधिक जानकारी प्रदान कर सकते हैं? त्रुटि के लिए अपने ब्राउज़र कंसोल की जांच करें जैसे कि "अनकॉट टाइप एरर: नल की संपत्ति 'आईडी' सेट नहीं कर सकता है। 'UI.render' फ़ंक्शन' डेटा' संदर्भ को 'शून्य' पर सेट करता है। आप शायद इसे 'UI.renderWithData' के साथ काम कर सकते हैं, लेकिन मुझे संदेह है कि हैंडलबार्स का उपयोग करके एक और अधिक सुरुचिपूर्ण समाधान है और उल्का को सामान्य स्तर के रूप में निचले स्तर के प्रतिपादन को संभालने देना है। – sbking

+0

मैं एक ऐप लिख रहा हूं जो गतिशील रूप से उपयोग इंटरैक्शन (डीएचटीएमएल की तरह) के आधार पर नोड्स बनाएगा। आईडी भाग ठीक काम करता है। जब सेटटाइमआउट कहा जाता है तो div हटा दिया जाता है। यह सिर्फ इतना है कि नष्ट कॉलबैक नहीं बुलाया गया था। हो सकता है कि .remove() में नष्ट कॉलबैक का आह्वान करने के लिए हुक नहीं है? – unional

+0

मैं स्रोत में एक और नजर डालता हूं, ऐसा लगता है जैसे उल्का में एक बग है। Remove पर दो कॉलबैक सदस्यता लेते हैं, पहले एक कॉल attrUpdater.stop(); और एक और कॉल रेंज हटाया गया (रेंज); attrUpdater.stop() के साथ अनाम फ़ंक्शन को कॉल किया गया था लेकिन श्रेणी के साथ अनाम कार्य (श्रेणी) नहीं था। श्रेणी हटाया गया (रेंज) वह है जो नष्ट कॉलबैक का आह्वान करता है। – unional

उत्तर

5

कुछ विकल्प डाला टेम्पलेट्स दूर करने के लिए:

क) अपने खाके में एक करीबी घटना का उपयोग करना।

Template.foo.events({ 
    'click a.close' : function(e, t) { 
    e.preventDefault(); 

    t.__component__.dom.remove(); 
    return false; 
    } 
}); 

ख) एक सहायक का उपयोग करना, और उदाहरण के संदर्भ

Template.foo.helpers({ 
    destroy: function() { 
    this.dom.remove(); 
    } 
}); 

var instance = UI.renderWithData(Template.foo, { }); 
UI.insert(instance, $("#content")[0]); 
instance.destroy(); 
+0

'instance.destroy()' 0.8.2 पर मेरे लिए काम नहीं किया, लेकिन 'instance.dom.remove()' किया। –

+0

'instance.destroy()' जिसका उपयोग मैं कर रहा हूं, पहले बनाए गए सहायक पर निर्भर करता है। वह सहायक विधि 'instance.dom.remove()' को कॉल कर रही है ताकि इसे नियंत्रकों में थोड़ा अधिक क्लीनर बनाया जा सके। मुझे लगता है कि आपने सहायक को सही ढंग से लागू नहीं किया है। –

+0

आह हाँ, यह समझ में आता है –

0

मैं हाल ही में इस समस्या में भी भाग गया। फिक्स अभी तक उल्का एक पैच की आपूर्ति, को हटाने समारोह को बदलने के लिए होगा:

setTimeout(function() { 
    $("#handle").remove() 
    self.__component__.isRemoved = true; 
}, 1000); 

clearTimeout के लिए के रूप में ... हम पैच मुझे लगता है कि

+0

ग्रेट। इससे पता चलता है कि उल्का को इस अच्छी तरह से संभालने का एक तरीका होना चाहिए। मैंने अपने पर्यावरण को टियरडाउन किया है इसलिए मैं आपका समाधान सत्यापित नहीं कर सका। क्या आपके पास कोई डेमो प्रोजेक्ट है जिसे मैं तुरंत देख सकता हूं? मैं आपके उत्तर को समाधान के रूप में चिह्नित करना चाहता हूं। – unional

1

के अनुसार के लिए इंतज़ार करना होगा 1 9 अप्रैल को अवीटल वापस, कोड फिर से लिखा जा रहा है (source)।

इस बीच, अगर आप अपने नोड तत्व $("#handle")[0] के गुणों पर एक नज़र डालें, तो आप आप एक $ui जो DomRange वस्तु (code) से मेल खाती है कहा जाता है देखेंगे। यदि आप DomRange ऑब्जेक्ट पर remove पर कॉल करते हैं, तो आपके destroyed कॉलबैक आग लग जाएगी। वास्तव में, यह किसी भी नेस्टेड टेम्पलेट्स के लिए कॉलबैक को भी आग लगा देगा।

$("#handle")[0].$ui.remove() 
2

यह वर्तमान में उल्का में एक बग है और निम्न संबंधित GitHub मुद्दों में पता लगाया जा रहा है:

यह तय किया जाना चाहिए जब updates to Blaze जारी किए जाते हैं।

1

मैं, उल्का 1.0.3.2 पर हूँ, इसलिए यह संभव इस समाधान समय प्रश्न पूछा गया था पर उपलब्ध नहीं था है ।ब्लेज़ वास्तव में remove विधि प्रदान करता है जो पहले प्रस्तुत किए गए टेम्पलेट दृश्य को हटा देता है और destroyed कॉलबैक को आमंत्रित करता है।

आपका कोड इस तरह दिखेगा:

Template.foo.rendered = function() { 
    var self = this; 
    this.x = setInterval(function() { console.log("running...") }, 1000); 
    setTimeout((function() { 
    UI.remove(self.view); 
    }), 1000); 
}; 

Template.foo.destroyed = function() { 
    return clearTimeout(this.x); 
}; 

ध्यान दें कि आप शायद rendered कॉलबैक के बजाय created कॉलबैक का उपयोग करना चाहते। ऐसा इसलिए है क्योंकि remove उम्मीद है कि पहले ही डीओएम में एक दृश्य प्रस्तुत किया गया है। आप यहां उन दो कॉलबैक के बीच के अंतर के बारे में अधिक पढ़ सकते हैं: http://meteor.github.io/blaze/docs.html#template_rendered

और यूआई कार्यक्षमता पर अधिक पढ़ने के लिए जो आपको ब्लेज़ देता है, यहां http://docs.meteor.com/#/full/blaze_remove देखें।

संबंधित मुद्दे