2012-10-26 6 views
12

मैं उल्का के साथ शुरू कर रहा हूं, और नेस्टेड टैग समूहों को शामिल करने के लिए todo example का अनुकूलन कर रहा हूं। मैं निम्न HTML है, जो प्रत्येक टैग समूह के प्रत्येक नाम आउटपुट, प्लस कि प्रत्येक समूह में टैग की सूची है:उल्का: नेस्टेड टेम्पलेट्स के भीतर मूल गुणों का उपयोग कैसे करें?

<template name="tag_filter"> 
    {{#each tag_types }} 
     {{ tag_name }} 
     {{#each values }} 
     <div data-taggroup="{{ ../tag_name }}"> 
     {{ name }} ({{ count }}) 
     </div> 
     {{/each}} 
    {{/each}} 
</template> 

मेरा प्रश्न यह है: मैं कैसे करने के लिए टैग पर क्लिक के लिए ईवेंट हैंडलर अनुकूलन है अभिभावक समूह के tag_name के मान तक पहुंचें? (यानी बाहरी प्रत्येक पाश से डेटा)।

वर्तमान में मेरे पास नीचे कोड है, लेकिन this ऑब्जेक्ट केवल मुझे name और count तक पहुंच प्रदान करता है।

Template.tag_filter.events({ 
    'mousedown .tag': function() { 
    console.log('tag mousedown', this); 
    // How do I get the value of tag_name? 
    } 
}); 

आप देख सकते हैं, मैं Handlebars parent paths का उपयोग किया है नाम से युक्त एक data-taggroup विशेषता जोड़ने के लिए है, लेकिन मैं ईवेंट हैंडलर के भीतर से है कि उपयोग करने के लिए कैसे यकीन नहीं है।

मुझे लगता है कि this question संबंधित है, लेकिन मुझे ओपी के समाधान को समझ में नहीं आता है (आंशिक रूप से क्योंकि मैं कॉफ़ीस्क्रिप्ट का उपयोग नहीं कर रहा हूं)। closed Meteor issue भी संबंधित है।

उत्तर

3

मुझे यकीन नहीं है कि आप मूल टेम्पलेट डेटा प्राप्त कर सकते हैं, लेकिन आपके ईवेंट हैंडलर में आप डोम तत्वों तक पहुंच सकते हैं: event.currentTarget क्लिक किए गए तत्व को प्राप्त करेगा। फिर विशेषताओं तक पहुंचने के लिए jQuery का उपयोग करें। यदि आवश्यक हो, event.currentTarget.parentNode को डोम में मूल तत्व मिलेगा।

पूर्व: मुझे नहीं पता कि आपने टैग क्लास कहां रखा है, लेकिन मान लें कि यह आपके div का वर्ग है जहां डेटा-टैग समूह परिभाषित किया गया है। तो फिर तुम का उपयोग कर टैग नाम मिल सकता है:

$(event.currentTarget).attr('data-taggroup') 
10

मैं माता पिता के डेटा का उपयोग का हल मिल गया:

Template.nestedTemplate.events({ 
    'click a.class':function(event,template){ 
     var parentID = template.data._id; 
     console.log(parentID); 
    } 
}); 

.events हैंडलर समारोह दो तर्क प्राप्त करता है: घटना, घटना के बारे में जानकारी के साथ एक वस्तु , और टेम्पलेट, टेम्पलेट के लिए एक टेम्पलेट उदाहरण जहां हैंडलर परिभाषित किया गया है। मुझे यह पता लगाने के लिए वास्तव में एक लंबा समय लगा। हैंडलबार्स समाधान का उपयोग न करें, यह आपके डेटा को दिखाता है!

+1

'_id' केवल तभी अस्तित्व में होगा जब आपके वर्तमान डेटा संदर्भ में वह चर सेट हो। यह 'this._id' को कॉल करने जैसा ही है। मुझे नहीं पता कि इससे आपको माता-पिता के डेटा तक पहुंचने में मदद मिलेगी? –

+4

यह। वर्तमान संदर्भ प्राप्त होगा (उदा। यदि आप {{प्रत्येक}} ब्लॉक में हैं), मेरे लिए 'टेम्पलेट' टेम्पलेट संदर्भ प्राप्त करता है, जो वर्तमान संदर्भ से भिन्न हो सकता है। –

0
"click selected":function(e){ 
    // this._id 
    var doc_id = $(e.currentTarget).parent().parent().attr("uid") 
    console.log(doc_id) 
}, 
//specify the each id in the div above the nearest #each 
//this will work in events but not in helpers` 
संबंधित मुद्दे