”;
In this chapter, you will see some simple examples of Aurelia refs. You can use it to create a reference to a particular object. You can create a reference to elements or attributes, as seen in the following table.
Reference Table
| Sr.No | Example & Description |
|---|---|
| 1 |
ref = “myRef” Used for creating a reference to DOM element. |
| 2 |
attribute-name.ref = “myRef” Used for creating a reference to custom attribute”s view-model. |
| 3 |
view-model.ref = “myRef Used for creating a reference to custom element”s view-model. |
| 4 |
view.ref = “myRef” Used for creating a reference to custom elements view instance. |
| 5 |
rcontroller.ref = “myRef” Used for creating a reference to custom element”s controller instance. |
In the following example, we will create a reference to the input element. We will use the default class syntax as a view-model.
app.js
export class App { }
We are creating a reference to the input element by adding the 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 the input field is rendered on the screen.
”;