I have a page called entry-main
and it includes this template:
<template>
<entry-search></entry-search>
<entry-details></entry-details>
</template>
Inside <entry-search>
there is another custom 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 typeahead viewmodel I'm getting the value of my typeahead like this:
$(this.id).on('typeahead:selected', function (e, item) {
this.selected = item;
});
My question now is, how can I get the this.selected
from my typeahead-viewmodel inside my entry-details-viewmodel?
And just for clarity, it should some what like this:
<entry-main>
<entry-search>
<typeahead></typeahead>
</entry-search>
<entry-details>
${selected}
</entry-details>
</entry-main>
You could do this:
Create a property "selected" 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 the typeahead's "selected" to the entry-main's "selected"
<entry-main>
<entry-search>
<typeahead selected.bind="selected"></typeahead>
</entry-search>
<entry-details>
${selected}
</entry-details>
</entry-main>
Untested code, but I think it should work.
As @JorisDecraecker says it could be done with EventAggregator
. Example code that can be modified to your needs:
app.html
<template>
<button click.delegate = "publish()">PUBLISH</button><br/>
<button click.delegate = "subscribe()">SUBSCRIBE</button><br/>
<button click.delegate = "dispose()">DISPOSE</button>
</template>
app.js
import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
@inject(EventAggregator)
export class App {
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
}
publish() {
var payload = 'This is some data...';
this.eventAggregator.publish('myEventName', payload);
}
subscribe() {
this.subscriber = this.eventAggregator.subscribe('myEventName', payload => {
console.log(payload);
});
}
dispose() {
this.subscriber.dispose();
console.log('Disposed!!!');
}
}
Source:
https://www.tutorialspoint.com/aurelia/aurelia_event_aggregator.htm
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.