ऑरेलिया कस्टम तत्व में और अपने नामस्थान में बाध्यकारी व्यवहार को कैसे जोड़ना है?

Question

मैं एक ऑरेलिया कस्टम एलिमेंट का निर्माण कर रहा हूं और मैं एक विशेष बाध्यकारी व्यवहार का उपयोग करना चाहता हूं, हालांकि मैं अपने कस्टम एलिमेंट क्लास के बाहर इसका उपयोग करने में सक्षम नहीं हूं (इसे घोषित करता हूं)। साथ ही, मैं सोच रहा था कि क्या बाध्यकारी व्यवहार और अन्य कस्टम सामान के लिए ऑरेलिया में नामस्थान मौजूद है?

यहाँ बाध्यकारी व्यवहार है कि मैं

वैकल्पिक-binding.js का उपयोग करना चाहते है - code provided by another stack question

export class OptionalBindingBehavior { 
    bind(binding, scope, interceptor) { 
    binding.originalupdateTarget = binding.updateTarget; 
    binding.originalTargetProperty = binding.targetProperty; 
    binding.updateTarget = val => { 
     if (val === undefined || val === null || val === '') { 
     binding.targetProperty = null; 
     } else { 
     binding.targetProperty = binding.originalTargetProperty; 
     } 
     binding.originalupdateTarget(val); 
    }; 
    } 

    unbind(binding, scope) { 
    binding.updateTarget = binding.originalupdateTarget; 
    binding.originalupdateTarget = null; 
    binding.targetProperty = binding.originalTargetProperty; 
    binding.originalTargetProperty = null; 
    } 
} 

मैं आयात इस तरह की कोशिश की

index.js

import {MyCustomElement} from './my-element'; 
    import './optional-binding.js'; 

    export function configure(aurelia) { 
    aurelia.globalResources('./my-element'); 
    } 

    export { 
    MyCustomElement 
    }; 

और सीधे कस्टम तत्व के अंदर import './optional-binding.js'; करने की कोशिश की लेकिन सभी मामलों में, यह कहता रहता है कि यह बाध्यकारी नहीं मिल रहा है।

मैं भी चाहते हैं पता है कि कैसे कस्टम बाध्यकारी व्यवहार है कि अन्य कोड/परियोजना द्वारा विश्व स्तर पर घोषित किया जा सकता है के साथ टकराव से बचने के लिए नामकरण उसके अपने नाम स्थान (यदि संभव हो) में इस बनाने के लिए।

संपादित

मैं एक require साथ बाध्यकारी व्यवहार आयात करने के लिए @janmvtrinidad के सुझाव की कोशिश की, लेकिन मैं इसी तरह के परिणाम प्राप्त के रूप में मैं जब ViewModel में यह आयात करने की कोशिश से पहले किया था। यह भी ध्यान रखें कि मेरी सभी फाइलें एक ही निर्देशिका में हैं, इसलिए ./ का उपयोग करना पर्याप्त होना चाहिए। अब तक, मैं एक ही फाइल के अंदर बाध्यकारी व्यवहार को कस्टम तत्व के रूप में घोषित करने में फंस गया हूं, यह एकमात्र तरीका है जो अब तक काम करता है।

कस्टम एलिमेंट व्यू के अंदर (टेम्पलेट)

<template> 
    <require from="./optional-binding"></require> 
    ... 

मैं त्रुटि मिलती है कि यह नहीं मिल सकता है यह

Cannot find module './aurelia-bootstrap-select/optional-binding' 

पूरे कोड/परियोजना

मैं भी जारी कुछ समय पहले समुदाय के लिए यह प्लगइन, यदि आप पूरा कोड देखना चाहते हैं, तो प्लगइन Aurelia-Bootstrap-Select के रूप में उपलब्ध है। वर्तमान में यदि कोई इसका उपयोग करना चाहता है और OptionalBindingBehavior भी है तो नाम टकराव होगा, जो एक बमर है।

नोट

के बाद भी मैं एक इनाम पोस्ट, मैं अभी भी नाम स्थान के साथ काम कर Aurelia में नाम टक्कर से बचने के लिए करने का सही तरीका के लिए इंतज़ार कर रहा हूँ।

Answer 1

मान लें कि आपकी कोड संरचना Aurelia CLI द्वारा उत्पन्न की गई है जहां तत्व, बाध्यकारी-व्यवहार आदि resources फ़ोल्डर में हैं। अब आप globalResources के रूप में अपने बाध्यकारी-व्यवहार और कस्टम तत्व जोड़ सकते हैं। अपने resources/index.ts में, config.globalResources([...]) के अंदर अपना बाध्यकारी-व्यवहार पथ जोड़ें।

export function configure(config: FrameworkConfiguration) { 
    config.globalResources([ 
     './value-converters/json', 
     './binding-behaviors/intercept-one', 
     './elements/pagination' 
    ]); 
} 

अब आप अपने html में require बिना विश्व स्तर पर अपने संसाधनों का उपयोग कर सकते हैं।

नामस्थानों के संदर्भ में, जब आप एक ही कक्षा नाम के साथ वैश्विक रूप से दो संसाधनों को पंजीकृत करने का प्रयास करते हैं तो ऑरेलिया एक त्रुटि फेंक देगा। जब आप इस स्थिति में भाग लेते हैं तो आपके पास दो विकल्प होते हैं।

• आप मौजूदा सम्मेलन को ओवरराइड करने के लिए @CustomElement और @CustomAttribute सजावटी का उपयोग कर सकते हैं। डिफ़ॉल्ट सम्मेलन का मानना ​​है कि आपका क्लासनाम InitCaps से dash-case में परिवर्तित हो जाएगा। अधिक जानकारी here।
• या आप अपने एचटीएमएल में स्पष्ट रूप से require कर सकते हैं। यह वैश्विक स्रोतों को ओवरराइड करेगा, फिर अपने एचटीएमएल के अंदर अपने कस्टम संसाधनों का उपयोग करें, यहां तक ​​कि ग्लोबल रिसोर्स के पास आपके कस्टम बाइंडिंग-व्यवहार/संसाधन के साथ समान क्लासनाम है।

संपादित

मुझे यह भी पता है कि कैसे अपने आप नेम स्पेस में यह सुनिश्चित करने के लिए (यदि संभव हो) कस्टम बाध्यकारी व्यवहार है कि अन्य कोड से विश्व स्तर पर घोषित किया जा सकता है के साथ टकराव के नामकरण से बचने के लिए चाहते हैं/परियोजना।

वर्तमान में यह संभव नहीं है। ऑरेलिया viewResources एक सिंगलटन है। जैसा कि मेरा मानना ​​है, ऊपर दिए गए दूसरे बुलेट में बताए गए अनुसार require का उपयोग करके इसे अपने एचटीएमएल पर जोड़ना पर्याप्त है।