Aurelia user elements inside user elements and variable exchange

Question

How do I access and exchange variables between custom elements? I have the following files ...

tip.html

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

tip.js

 export class Tip {} 

Tip-trigger.html

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

tip-trigger.js

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

Tip-content.html

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

tip-content.js

 export class TipContent {} 

In my Tip class, I would like to have the variable name visible . When showTip visible fires, showTip will be set to true, which I would then use to add the class to tip-content.html. How can I share variables between these custom elements?

The idea is to create an element for displaying tooltips, where any type of content can be a trigger, and any type of content can be displayed at startup. Basic example:

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

Answer 1

Do you just need to turn Tip into a service class and import it?

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

Then:

 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. } } 

* Disclaimer: This is not verified.

Answer 2

Here is a solution to your problem at Plunker.

Note that the tip-trigger and tip-content elements are simply replaceable parts of the template. They did not need to be the components themselves (which greatly confused me in the "original" article of custom elements ).

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; } }