Aurelia - Refs

In this short chapter we will show you simple example of Aurelia refs. We can use it to create a reference to a particular object. We can create a reference to elements or attributes, as seen in the following table.

Reference Table

Example	Description
ref="myRef"	Used for creating a reference to DOM element.
attribute-name.ref="myRef"	Used for creating a reference to custom attribute's view-model.
view-model.ref="myRef	Used for creating a reference to custom element's view-model.
view.ref="myRef"	Used for creating a reference to custom elements view instance.
rcontroller.ref="myRef"	Used for creating a reference to custom element's controller instance.

In our example we will show you how to create a reference to input element. We will use default class syntax as a view-model.

app.js

export class App { }    

We are creating a reference to input element by adding ref="name" attribute.

app.html

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>    

When we run the app, we will see that the text entered into input field is rendered on screen.