Aureliaカスタムエレメント内部でカスタムエレメントと変数を共有する

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

私 Tipクラスで

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

私は、変数名visibleを持っていると思います。 showTipが起動されると、visibleがtrueに設定されます。これをtip-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は、Plunkerで問題を解決する方法です。 チップトリガと先端コンテンツ要素は単にテンプレートの交換可能な部品である

注意。彼らはコンポーネントそのものである必要はありません（それは"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; 
    } 
}