Aurelia - Refs

Advertisements

Previous Page
Next Page  

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.

Aurelia Refs Example
Advertisements