Transferring data from one view model to another in Aurelia

Question

I have a page called entry-main and include this template:

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

Inside <entry-search> there is another user element. It looks like this:

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

Inside the viewahead typeahead, I get the value of my typeahead as follows:

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

Now I have a question, how can I get this.selected from my model type-head-viewmodel in my input-data model-viewmodel?
And just for clarity, there should be something like this:

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

Answer 1

You can do it:

Create the "selected" property in entry-main :

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

Create a bindable property in typeahead :

 import { bindable } from 'aurelia-framework'; export class Typeahead { @bindable selected; //... rest of the code } 

Bind typeahead "selected" to the selected "main" "

 <entry-main> <entry-search> <typeahead selected.bind="selected"></typeahead> </entry-search> <entry-details> ${selected} </entry-details> </entry-main> 

Unconfirmed code, but I think it should work.