Skip to content

Instantly share code, notes, and snippets.

@Vheissu
Last active August 26, 2024 05:36
Show Gist options
  • Save Vheissu/1ddd605a7ba40ae3052b442801a833c3 to your computer and use it in GitHub Desktop.
Save Vheissu/1ddd605a7ba40ae3052b442801a833c3 to your computer and use it in GitHub Desktop.
Dynamic component example with value converters using object parameters
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.js.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
{
"dependencies": {
"aurelia-bootstrapper": "latest",
"moment": "2.22.2",
"numeral": "2.0.6"
}
}
<template>
<require from="./sort"></require>
<div class="row">
<div class="col-sm-3"
repeat.for="repo of repos | sort: { propertyName: 'open_issues', direction: 'descending' }">
<a href="${repo.html_url}/issues" target="_blank">
${repo.name} (${repo.open_issues})
</a>
</div>
</div>
</template>
import {HttpClient} from 'aurelia-http-client';
export class App {
repos = [];
activate() {
return new HttpClient()
.get('https://api.github.com/orgs/aurelia/repos')
.then(response => this.repos = response.content);
}
}
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
export class SortValueConverter {
toView(array, config) {
let factor = (config.direction || 'ascending') === 'ascending' ? 1 : -1;
return array.sort((a, b) => {
return (a[config.propertyName] - b[config.propertyName]) * factor;
});
}
}
export class TakeValueConverter {
toView(array, count) {
return array.slice(0, count);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment