Elementy niestandardowe Aurelia wewnątrz elementów niestandardowych i współużytkowanie zmiennych

Question

Jak uzyskać dostęp do zmiennych użytkownika między elementami niestandardowymi? Mam następujące pliki ...

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

W moim Tip klasy chciałbym mieć nazwę zmiennej visible. Po wywołaniu showTipvisible zostanie ustawione na wartość true, co następnie wykorzystam do dodania klasy do tip-content.html. Jak mogę udostępnić zmienne między tymi elementami niestandardowymi, aby to zrobić?

Chodzi o to, aby utworzyć element wyświetlający wyskakujące okna z napisem "tip-up", w których dowolny rodzaj treści może być wyzwalaczem, a po uruchomieniu można wyświetlić dowolny rodzaj treści. Przykładem podstawowe:

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

Answer 1

Czy wystarczy włączyć Tip do klasy usług, jak i importować?

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

Następnie:

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

* Uwaga: To jest niesprawdzone.

Answer 2

Here jest rozwiązanie problemu w Plunker.

Uwaga że tip-trigger tip-content i elementy są po prostu wymiennymi częściami szablonu. Nie muszą być komponentami (to bardzo mnie zdezorientowało w "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; 
    } 
}