जेएसएफ समग्र घटक में जावास्क्रिप्ट को एकीकृत करें, स्वच्छ तरीका

Question

जेएसएफ में, जावास्क्रिप्ट को एकीकृत करने के लिए "दाएं" और "साफ" तरीका क्या होगा जो एक समग्र-घटक में एकीकृत है? मैं Unobtrusive JavaScript का प्रशंसक हूं, और एचएसएस से जेएस से सीएसएस से अलग हूं। जितना संभव हो उतना कम क्विर्क रखने का एक अच्छा तरीका क्या होगा?

<composite:interface> 
    // ... 
</composite:interface> 

<composite:implementation> 
    // ... 
    <script> initSomething('#{cc.clientId}'); </script> 
</composite:implementation>  

क्या मुझे पसंद नहीं है है, language A उपयोग करने के लिए language B उत्पन्न करने के लिए: यह क्या मैं अब तक सबसे ज्यादा पसंद है। असल में यह ईवेंट हैंडलर और सामान के लिए भी जाता है। मेरा पसंदीदा उन हैंडलर को <insert favorite DOM JavaScript library here> के माध्यम से संलग्न करना होगा। क्या यह संभव है? आप इस तरह के एकीकरण कैसे करते हैं?

Answer 1

मैं कहूंगा कि आपके पास जो कुछ भी है, वह आपको सबसे अच्छा है, बशर्ते कि आप बिल्कुल सकारात्मक हैं कि HTML तत्व की प्रकृति इतनी अनूठी है कि आपको इसे हर बार फिर से आईडी द्वारा चुनने की ज़रूरत है ।

एचटीएमएल प्रतिनिधित्व अद्वितीय (मुझे लगता है कि एक Facelets टेम्पलेट कल्पना नहीं कि कर सकते हैं या शामिल फ़ाइल शीर्षक, मेनू, पाद लेख, आदि जैसे आवेदन-व्यापी अद्वितीय HTML तत्वों शामिल हो सकता है, लेकिन एक समग्र घटक पुन: उपयोग किया जा सकता है जो है एक बार में कई बार? मैं जीवन के लिए कल्पना नहीं कर सकता कि), तो आप उस पर एक अद्वितीय क्लासनाम और हुक प्रारंभिक उपयोग करने पर भी विचार कर सकते हैं।

उदा। /resources/composites/yourComposite.xhtml

<cc:implementation> 
    <h:outputScript library="composites" name="yourComposite.js" target="head" /> 
    <div id="#{cc.clientId}" class="your-composite"> 
     ... 
    </div> 
</cc:implementation> 

/resources/composites/yourComposite.js में (यह मानते हुए आप jQuery का उपयोग कर रहे है कि)

var $yourComposites = $(".your-composite"); 
// ... 

साथ

आप कर सकते हैं यदि आवश्यक हो तो उद्धरण एक jQuery.each() में उनमें से प्रत्येक के लिए स्वत: जनरेट HTML तत्व ID:

$yourComposites.each(function(index, yourComposite) { 
    var id = yourComposite.id; 
    // ... 
});