ネストされたHTML要素内からAureliaカスタム属性関数にアクセス

Question

私はPopoverカスタム属性を実装するView/View-Modelペアを持っています。私の具体的な目標は、ポップオーバー自体の中でのボタンクリックと、ページ上の他の場所をクリックすることの両方でポップオーバーを解除することです。

私のdoSomething（）VM関数は、ビュー内の要素レベルでは動作しますが、要素を含む属性内では動作しません。コードのコメントでさらに問題を説明しました。私はいくつかの指導に感謝します。ありがとう！

blog.html

<template> 
<require from="../popover/popover"></require> 

... 

<!-- doSomething() works here! --> 
<button type='button' click.trigger='doSomething()'>ClickMe</button> 

<!-- doSomething() does not work here! --> 
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows 
    "Uncaught ReferenceError: doSomething is not defined" --> 
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'" 
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span> 

... 
</template> 

blog.ts

... 
doSomething() { 
    console.log('doing something'); 
} 

popover.ts

... 
bind() { 
$(this.element).popover({ 
    title: this.title, 
    placement: this.placement, 
    content: this.content, 
    trigger: 'click', 
    html: true 
    }); 
} 

Answer 1

私は最近、同じ問題を通り抜けました。私は現在、AureliaのBootstrapポートに取り組んでいます。まだ完了しておらず、ドキュメントも書いていませんが、Popoverはすでに実装されています。

あなたが見てみるために歓迎以上です：あなたはポップオーバーが（でも、可能ならば）非常に複雑になるだろうを実装しようとしている方法 https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover

、物事はスコープと厄介得ようとしています。テキストしかないのであれば、大丈夫でしょうが、基本的には何かをポップオーバーに入れて、それを正しいView-Modelに結びつけたいと思っています。

私がこれを解決する方法は、Popoverを表すカスタム要素をいくつか持っていることでした。私はAubsCustomPopover、AubsPopoverTitle、およびAubsPopoverContentを持っています。 この3つのカスタム要素を使用すると、ポップオーバーのブートストラップマークアップが作成されます。ビューに直接追加するため、適切なView-Modelを使用できます。

カスタム属性があります。これはAubsPopoverです。これは、指定したトリガアクション（hover、click、focus、outsideClick）に応じてカスタム属性の表示と非表示を担当するものです。

それはこのようなものになります使用してコード：、私はそれを行う前に、より多くの成分のカップルを持っていたい、私はポップオーバーが完全に実装されているが、私はすべてのドキュメントを書いていないと述べたよう

<aubs-custom-popover model.bind="customPopover"> 
    <aubs-popover-title> 
    This is my awesome title <i class="fa fa-star"></i> 
    </aubs-popover-title> 
    <aubs-popover-content> 
    <div class="form-group"> 
     <label for="exampleInputPassword1">Password</label> 
     <input type="password" class="form-control" text.bind="password" 
      placeholder="Password"> 
    </div> 

    <button class="btn btn-default" click.delegate="isOpen = false"> 
     Close 
    </button> 
    </aubs-popover-content> 
</aubs-custom-popover> 

<button class="btn btn-primary" 
    aubs-popover="custom-model.bind: customPopover; 
        trigger: outsideClick; 
        position: bottom; 
        open.bind:isOpen"> 
    Custom Popover 
</button> 

を。

これを使用したい場合は、セットアップの手助けをすることができます。