AURELIA: The Basics & Fundamentals
# MVVM Framework
Aurelia follows a MVVM software architectural pattern (Model-View-View-Model). The intent of this is to provide a clean “separation of concerns” between the user interface controls and their logic. It also helps to achieve maintainability, extensibility and testability of the app's code.
The MVVM pattern has been derived from the MVC (Model-View-Controller) model. The main difference between them is that all interactions in MVVM between Model and ViewModel go through binding system, which set loosely coupled relations between View’s elements and Model’s properties. By comparison, MVC goes through method calls.
# Data Binding between the ViewModel and Its View
Aurelia is a convention-based framework, which means that it has preset basics; however, you can always change the configurations to fit your needs. For instance, it is required by default that all paired ViewModels and the View templates have the same name and only differ in the file extension (e.g. if you create a module home.js for the ViewModel, Aurelia assumes that you have home.html file for your View).
Let's look at some code that demonstrates this and the work of a two-way Data Binding system.
Aurelia’s default initialization will search for an app module to start an app. So, from app.js we export class App, which is going to be our root ViewModel.
In app.html we put a root View. Again, by convention, every View should be nested inside of a template tag.
So, here is our simple page in the browser:
This example demonstrates how data-binding works. We get preset input value and message below it from the ViewModel, but as we enter another value in the input, text below changes immediately as we type.
You can put .bind on any element in your html View file. This will trigger Aurelia to search for the property in the corresponded ViewModel and set the value of that attribute.
By default, Aurelia uses one-way binding for most of the html attributes, so data flows from your ViewModel to the View. However, please note, inputs in two-way binding (as in our code above) can pass the data from your View to its View model.
Aurelia also allows you to be explicit about data flow direction and set .one-way, .two-way or .one-time flow directions for your attributes depending on your needs.
Aurelia is managed by a highly professional community, which makes it a very stable framework. One of its best attributes is the two-way data-binding feature and that it is a highly modularized framework. In your project, you can use classic Aurelia with only a few of its libraries or extend it with your own libraries.