Aurelia FAQ - devuxd/SeeCodeRun GitHub Wiki
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
- One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
- Two-way - Updates made to the ViewModel update the View, and vise versa
- One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>
After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="left"
title="Aurelia with tooltips!!!">
Tooltip Example
</button>
And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}
Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia