कस्टम तत्वों और साझाकरण चर के अंदर ऑरेलिया कस्टम तत्व

Question

मैं कस्टम तत्वों के बीच & साझा चर कैसे प्राप्त करूं? मैं निम्न फ़ाइलें है ...

tip.html

<template> 
    <div class="tip-container"> 
     <content select="tip-trigger"></content> 
     <content select="tip-content"></content> 
    </div> 
</template> 

tip.js

export class Tip {} 

टिप trigger.html

<template> 
    <span class="tip-trigger" click.trigger="showTip()"> 
     <content></content> 
    </span> 
</template> 

टिप trigger.js

export class TipTrigger { 
    showTip() { 
     console.debug(this); 
    } 
} 

टिप content.html

<template> 
    <span class="tip"> 
     <content></content> 
     <span class="tip__close tip__close--default">×</span> 
     <span class="tip__color"></span> 
    </span> 
</template> 

टिप content.js

export class TipContent {} 

मेरी Tip वर्ग में मैं एक चर नाम visible करना चाहते हैं। जब showTip ट्रिगर किया गया visible सत्य पर सेट किया जाएगा, जिसे मैं टिप-content.html में कक्षा जोड़ने के लिए उपयोग करता हूं। ऐसा करने के लिए मैं इन कस्टम तत्वों के बीच चर कैसे साझा कर सकता हूं?

विचार टिप पॉप-अप दिखाने के लिए एक तत्व बनाना है जहां किसी भी प्रकार की सामग्री ट्रिगर हो सकती है और ट्रिगर होने पर किसी भी प्रकार की सामग्री प्रदर्शित की जा सकती है। मूल उदाहरण:

<tip> 
    <tip-trigger><button>?</button></tip-trigger> 
    <tip-content><div>Here is some helpful info...</div></tip-content> 
</tip> 

Answer 1

तुम सिर्फ एक सेवा की तरह वर्ग में Tip बारी करने की आवश्यकता है और इसे आयात करें?

export class Tip { 
    constructor() { 
     this.visible = false; 
    } 
    show() { 
     this.visible = true; // Or whatever to show the content 
    } 
    hide() { 
     this.visible = false; 
    } 
} 

फिर

:

import {inject} from 'aurelia-framework'; 
import {Tip} from './tip'; 

@inject(Tip) 
export class TipTrigger { 
    constructor(tip) { 
     this.tip = tip; 
    } 
    showTip() { 
     this.tip.show(); 
     // Or I suppose you could access 'visible' directly 
     // but I like the implementation details a method call offers. 
    } 
} 

* अस्वीकरण: यह अपरीक्षित है।

Answer 2

Here प्लंकर में आपकी समस्या का समाधान है।

ध्यान दें कि टिप ट्रिगर और टिप सामग्री तत्वों सिर्फ टेम्पलेट के बदली हिस्से हैं। उन्हें खुद घटकों की आवश्यकता नहीं है (जिसने मुझे "original" custom elements article में बहुत उलझन में डाल दिया)।

app.html:

<template> 
    <require from="tip"></require> 
    <tip> 
     <tip-trigger><button>?</button></tip-trigger> 
     <tip-content><div>Here is some helpful info...</div></tip-content> 
    </tip> 
</template> 

tip.html:

<template> 
    <div class="tip-container"> 
     <div> 
     <div click.trigger="showContent()"> 
      <content select="tip-trigger"></content> 
     </div> 
     </div> 
     <div show.bind="contentVisible"> 
     tip content: 
     <content select="tip-content"></content> 
     </div> 
    </div> 
</template> 

tip.js:

export class Tip { 
    showContent(){ 
    this.contentVisible = !this.contentVisible; 
    } 
}