UI घटक के बीच नॉकआउट JS वेधशालाओं को कैसे साझा करें

Question

मैं समझता हूँ कि यूआई घटकों के गुणों का उपयोग कैसे करें imports: {}औरexports: {} कैसे साझा करें:

defaults: {
    exports: {
        shouldShowMessage: '${$.component}'
    }
}

जो निर्यात में घटक का नाम देता है।

लेकिन जब मैं एक नॉकआउट वेधशाला को निर्यात करने की कोशिश करता हूं तो यह हमेशा अपरिभाषित होता है:

defaults: {
    exports: {
        shouldShowMessage: '${$.shouldShowMessage}'
    }
}

...

setupKoBindings: function() {
    this.shouldShowMessage = ko.observable('Testing');
}

वर्कअराउंड के रूप में मैं एक स्टोरेज मॉडल बनाने जा रहा हूं जैसा कि यहां बताया गया है लेकिन मैं आयात और निर्यात का उपयोग करना पसंद करूंगा।

Answer 1

निर्यात ऑब्जेक्ट के मूल्यों को उदाहरण के लिए, '': 'द्वारा अलग किए गए नाम और UiComponent उदाहरण की संपत्ति के लिए हल करना होगा checkout.cart.total:title।
निर्यात लक्ष्य नाम में UI घटक "नाम स्थान" शामिल करना है।

आपके उदाहरण में, आप मान को एक स्ट्रिंग पर सेट करते हैं, जो कि UiComponent की एक संपत्ति को हल करता है जो निर्यात स्रोत है। जब आप इसे वैध निर्यात लक्ष्य नहीं मानते तो निर्यात अपरिभाषित होता है।

यहाँ एक उदाहरण है जो काम करता है:

defaults: {
    exportTarget: "foo.bar",
    exportTargetProperty: "showMessage",

    tracks: {
        shouldShowMessage: true
    },

    exports: {
        shouldShowMessage: '${$.exportTarget}:${$.exportTargetProperty}'
    }
}
...

हर बार जब मूल्य परिवर्तन होता है, तो पूरे नाम के साथ एक UiComponent की shouldShowMessageसंपत्ति में संपत्ति के मूल्य की प्रतिलिपि होगी । ध्यान दें कि यह स्वचालित रूप से लक्ष्य संपत्ति को KO के रूप में देखने योग्य नहीं बना देगा। यह स्पष्ट रूप से घोषित किया जाना चाहिए, अगर मूल्य में बदलाव के लिए केओ को उस संपत्ति तक पहुंचने वाले डीआर नोड्स को ट्रिगर करना चाहिए।showMessagefoo.bar

वैसे, ऑब्जेक्ट में जोड़ने shouldShowMessageसे tracksयह एक ko-es5 ऑब्जर्वेबल ऑटोमैटिकली हो जाएगा। शाब्दिक ko.observable()कार्यों का उपयोग करना , भी।

ऊपर के उदाहरण में, exportTargetऔर exportTargetPropertyमें कॉन्फ़िगर किया गया है defaults। उन्हें JSON में UiComponent विकल्पों के भाग के रूप में भी निर्दिष्ट किया जा सकता है, जो आमतौर पर अधिक समझ में आता है, क्योंकि यही वह जगह है जहां UComComentent पदानुक्रम UiComponent नामों सहित परिभाषित किए गए हैं।

अंत में, मैं यह नोट करना चाहूंगा कि मैं व्यक्तिगत रूप से आपके समाधान का उपयोग मूल्य वस्तु का उपयोग करके अन्य यूआई घटक के लिए मान पास करने के लिए करता हूं जो निर्यात या आयात का उपयोग करने से बेहतर है। मेरे अनुभव को DOM या UiCompords में साझा स्थिति रखने के लिए सभी सरल लेकिन सरल मामलों में स्पेगेटी OOP के लिए एक नुस्खा है।

Comments

बहुत बढ़िया स्पष्टीकरण, धन्यवाद @Vinai! जब भी मेरे पास समय होगा मैं इसे आज़माऊंगा और यदि यह काम करता है तो इसे स्वीकार किया जाएगा।

— बेन क्रुक

उपयोग करते समय मैं कुछ मुद्दों में चला गया हूं tracks, जब वे किसी भी अन्य तरीके से वेधशालाओं की स्थापना करते समय ठीक काम this.shouldShowMessage.subscribe is not a functionकरते हैं, तो वे अब वे काम करते हैं, जो अब वेधशालाओं की सदस्यता लेते हैं this.shouldShowMessage.subscribe(function() { ... });। लगता है जैसे मैं एक कदम याद कर रहा हूँ या tracksएक प्रेक्षण योग्य नहीं है उसी तरह।

— बेन क्रुक

आप सही हैं, संपत्तियाँ अब नियमित रूप से ko वेधशाला नहीं हैं, बस ES5 गेट्टर / सेटर जोड़े हैं। यदि आप मूल अवलोकन फ़ंक्शन का उपयोग करना चाहते हैं, तो आप ko इंजेक्षन कर सकते हैं और उपयोग कर सकते हैं ko.getObservable(this, 'shouldShowMessage').subscribe(function(newValue) { ...});(पहला तर्क viewmodel ( this) है, दूसरा जो ट्रैक की गई संपत्ति का नाम है। अधिक जानकारी यहां: github.com/SteveSanderson -knockout

— es5- Vinai)

आह कि समझ में आता है, आप

— बेन बदमाश

आयात और निर्यात के साथ खेलने के बाद और अभी भी असफल होने से मैं सहमत हूं कि यह स्पेगेटी कोड है, मैंने छोड़ दिया है और मैं मैनुअल सदस्यता और एक भंडारण मॉडल के साथ रहूंगा।

— बेन क्रुक