• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

All About The Aurelia UI Virtualization Plugin

Aurelia 1 · February 12, 2016

A little less publicised aspect of Aurelia is the UI Virtualisation plugin. For those accustomed to ReactJS’s speed of rendering large amounts of items in the DOM and offering high paint performance, this will be a welcome plugin to use.

Although, do not be mistaken. The Aurelia UI Virtualization plugin is not meant to replace React, nor give you the same power that it offers. This is not a plugin for a virtual DOM, at least not at the time of writing this. For that, you will need to integrate and use React or an alternative.

This is why it is worth noting is that currently this plugin is only for iterating large sets of data in place of Aurelia’s standard repeat.for template control and also requires you to place some constraints on your code.

This plugin is more suited for content with items of a predefined height in a long list, akin to how Apple and Android allow you to create lists in iOS and Android SDK’s. You might use this for a theoretical address book or displaying long lists of users or products in a directory.

Installing and loading it

Simply open your command window in your project directory and type jspm install aurelia-ui-virtualization to kick off the festivities.

Then add it to your application to wherever your bootstrap logic is contained (mine is in a main.js file):

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-ui-virtualization');

  aurelia.start().then(a => a.setRoot());
}

Using it

There are two ways you can use the virtual repeater functionality: a) in the form of a custom element the plugin ships with and b) a custom attribute similar to repeat.for — for the sake of this article, we will be using the attribute so we don’t have to add anything extra to the markup.

Worth pointing out is the custom element actually uses the attribute behind the scenes, so might as well use the attribute to save yourself the abstraction and barrier to learning how to use this awesome plugin for long lists of data.

Before you proceed:
Remember your items need to be wrapped in a container with a fixed height so it can be scrolled. Your repeated items inside also need to have a fixed height as well. There is some styling in the below example with these constraints taken into consideration.

<template>
<style>
.virtual-repeater-wrapper {
     height: 70vh;
     overflow: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
}

.virtual-repeated-item {
    background: #FF0000;
    height: 100px;
}
</style>
<div class="virtual-repeater-wrapper">
    <div virtual-repeat.for="item of items" class="virtual-repeated-item">
         ${item}   
    </div>
</div>
</template>

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jonathan
Jonathan
6 years ago

Great post. Say I want to repeat over a list of multiple items, but the css is such that one row consists of multiple items (using float or display: inline-block). How can I force a new div to be created for every few items (say 3 per row) so that the virtual repeater will actually look at each row of items, and not at each item?

0
Guillermo Eyherabide
Guillermo Eyherabide
6 years ago

Hey Dwayne, i saw in the virtualization demo page, that the 1st example isn’t it wrapped in a fixed height container, how can we achieve this?
is there any way to implement this?
Thanks

0
Overbound
Overbound
5 years ago

I had some trouble getting this plugin to install properly on export with Webpack.

To fix this I used :
aurelia.use.plugin(PLATFORM.moduleName(‘aurelia-ui-virtualization’));

instead of:
.plugin(‘aurelia-ui-virtualization’);

Just thought I throw that out here for anyone else who has the same issue.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz