Pass von Daten von einem View-Modell zum anderen in Aurelia

Question

Ich habe eine Seite entry-main genannt und enthält diese Vorlage:

<template> 
    <entry-search></entry-search> 
    <entry-details></entry-details> 
</template> 

Innen <entry-search> gibt es ein weiteres benutzerdefiniertes Element. Es sieht wie folgt aus:

<template> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="input-group"> 
       <span id="entry_search" class="input-group-addon"> 
        <span class="fa fa-search"></span> 
       </span> 
       <!-- important part --> 
        <typeahead id="choose" placeholder="Holding the place"></typeahead> 
       <!-- end of important part --> 
      </div> 
     </div> 
    </div> 
</template> 

Im Inneren des typeahead Viewmodel ich den Wert meiner typeahead wie diese bekommen:

$(this.id).on('typeahead:selected', function (e, item) { 
     this.selected = item; 
}); 

Meine Frage ist nun, wie kann ich die this.selected von meinem typeahead- Viewmodel in meinem Entry-Details-Viewmodel?
Und nur für Klarheit, es sollte etwas, was wie folgt aus:

<entry-main> 
    <entry-search> 
      <typeahead></typeahead> 
    </entry-search> 

    <entry-details> 
      ${selected} 
    </entry-details> 
</entry-main> 

Answer 1

Sie können dies tun:

eine Eigenschaft erstellen "ausgewählt" in entry-main:

export class EntryMain { 
    selected = ''; 
    //rest of the code 
} 

eine bindable erstellen Eigentum in typeahead:

import { bindable } from 'aurelia-framework'; 

export class Typeahead { 
    @bindable selected; 
    //... rest of the code 
} 

Bind die typeahead ist auf das Eingabe-Haupt der „ausgewählten“

<entry-main> 
    <entry-search> 
     <typeahead selected.bind="selected"></typeahead> 
    </entry-search> 

    <entry-details> 
     ${selected} 
    </entry-details> 
</entry-main> 

Ungeprüfte Code, aber ich denke, „ausgewählt“ es funktionieren soll.