Skip to content

Instantly share code, notes, and snippets.

@pjschreifels

pjschreifels/app.html

Last active December 15, 2016 20:29
Show Gist options
  • Save pjschreifels/3cc3f102c76a6171b71606dea0ca334a to your computer and use it in GitHub Desktop.
Save pjschreifels/3cc3f102c76a6171b71606dea0ca334a to your computer and use it in GitHub Desktop.
Download ZIP
Select all trigger for checked.bind values.
Raw
app.html
<template>
<require from='./value-converter'></require>
<div class="container">
<div class="row">
<h5 class="mt-1">${title}</h5>
<table class="table">
<thead>
<tr>
<th width="5%">
<label class="form-check-inline">
<input class="form-check-input" type="checkbox" click.delegate="checkAll($event.target.checked)">
</label>
</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of rows | filter">
<td>
<label class="form-check-inline">
<input class="form-check-input au-checked-bind" type="checkbox" model.bind="row" checked.bind="selectedRows & signal:'checkedBinding'">
</label>
</td>
<td>${row.description}</td>
</tr>
</tbody>
</table>
<hr class="mt-0 mb-0" />
<p class="mt-1">Selected rows:</p>
<ul>
<li repeat.for="row of selectedRows">${row.id} - ${row.description}</li>
</ul>
</div>
</div>
</template>
Raw
app.js
import { inject } from 'aurelia-framework';
import { BindingSignaler } from 'aurelia-templating-resources';
@inject(BindingSignaler)
export class App {
title = 'Page data';
rows = [
{id: 1, description: 'Some row', visible: true},
{id: 2, description: 'Other row', visible: true},
{id: 3, description: 'Different row', visible: false}
];
selectedRows = [];
constructor(signaler) {
this.signaler = signaler;
}
signalBindings() {
this.signaler.signal('checkedBinding');
}
checkAll(checked) {
let visibleRows = document.getElementsByClassName('au-checked-bind');
for (var i = 0, row; row = visibleRows[i]; i++) {
row.checked = checked;
}
this.signalBindings();
return true;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/33a3e561f9.js"></script>
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
value-converter.js
export class filterValueConverter {
toView(array, setPotentialRowsFn) {
var visible = array.filter(function(row){
return row.visible;
});
return visible;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment