3.3 Select component
Citation from Aurelia Documentation
In Aurelia, user interface components are composed of view and view-model pairs. The view is written with HTML and is rendered into the DOM. The view-model is written with ES 2016 and provides data and behavior to the view. The Templating Engine along with Dependency Injection are responsible for creating these pairs and enforcing a predictable lifecycle for the component. Once instantiated, Aurelia's powerful databinding links the two pieces together allowing changes in your view-model to be reflected in the view and changes in your view to reflected in your view-model. This Separation of Concerns is great for developer/designer collaboration, maintainability, architectural flexibility, and even source control.
To create a UI component, you need only create two files, one for each of the component parts.
View: md-select.html
<template>
<h4>Materialize select demo</h4>
<div class="row">
<div class="col s4">
<select md-select value.two-way="selectedMeal">
<option>Select your meal</option>
<option repeat.for="meal of food" model.bind="meal">
${meal.name}
</option>
</select>
</div>
<div show.bind="selectedMeal" class="col s4">
You selected: ${ selectedMeal.name }!
</div>
</div>
</template>
where the single statement <select md-select="selected.two-way: selectedMeal;">
is responsible for the instantiation of the select control:

Image 1
Observe that the custom atttribute defined on this single statement (selected
) coupled with the use of Aurelia .bind
feature maps the value of the selected
attribute with the variableselectedMeal
defined in the matching view model (shown below)
View model md-select.js
export class Food {
food = [
{ id: 0, name: 'Pizza' },
{ id: 1, name: 'Cake' },
{ id: 2, name: 'Steak' },
{ id: 3, name: 'Pasta' },
{ id: 4, name: 'Fries' }
];
selectedMeal = null;
}
Finally, add the new component to your router-configuration:
File app.js
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' },
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' },
{ route: 'md-select', name: 'md-select', moduleId: 'material/select/md-select', nav: true, title: 'Select' }
]);
this.router = router;
}
}
Last updated