Elementi personalizzati Aurelia all'interno di elementi personalizzati e variabili di condivisione

Question

Come accedere alle variabili di condivisione & tra elementi personalizzati? Ho i seguenti file ...

tip.html

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

tip.js

export class Tip {} 

punta-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> 

punta di content.js

export class TipContent {} 

nella mia classe Tip vorrei avere un nome di variabile visible. Quando showTip viene attivato, visible dovrebbe essere impostato su true, che poi utilizzerei per aggiungere una classe in tip-content.html. Come posso condividere variabili tra questi elementi personalizzati per farlo?

L'idea è di creare un elemento per mostrare i pop-tip di tip in cui qualsiasi tipo di contenuto può essere il trigger e qualsiasi tipo di contenuto può essere visualizzato quando attivato. Esempio di base:

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

Answer 1

Avete solo bisogno di trasformare Tip in una classe di servizio simile e importarlo?

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

Poi:

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: Questo è testato.

Answer 2

Here è una soluzione al problema in Plunker.

Nota che gli elementi punta-trigger e punta di contenuti sono solo parti sostituibili del modello. Non hanno bisogno di essere componenti stessi (che mi ha confuso molto nel "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; 
    } 
}