Skip to content

Instantly share code, notes, and snippets.

@SaucyJack

SaucyJack/app.html

Last active February 18, 2020 23:08
Show Gist options
  • Save SaucyJack/7da83f11258f49724635e6bd5041f36f to your computer and use it in GitHub Desktop.
Save SaucyJack/7da83f11258f49724635e6bd5041f36f to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap-Sandbox
Raw
app.html
<template>
<h4>Bootstrap Radio Button Groups and Aurelia</h4>
<div class="container">
<div class="row">
<div class="btn-group" data-toggle="buttons">
<h5>Fancy Bootstrapped Radio Buttons</h5>
<label repeat.for="option of options"
class="btn btn-sm btn-default ${option.value === selectedOption.value ? 'active' : ''}">
<input type="radio"
name="bootstrapOptions"
model.bind="option"
checked.bind="$parent.selectedOption"
click.delegate="bootstrapClicked($event)">${option.text}
</label>
</div>
Selected: ${selectedOption.value}:${selectedOption.text}
</div>
<div class="row">
<h5>Not Fancy Radio Buttons</h5>
<label repeat.for="option of options"
class="radio-inline">
<input type="radio"
name="normalOptions"
model.bind="option"
checked.bind="$parent.nonFancySelectedOption"
click.delegate="clicked($event)"> ${option.text}
</label>
</div>
<div class="row">
<h5>Bound to a Boolean</h5>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-default ${booleanOption ? '' : 'active'}">
<input type="radio" name="booleanOptions" model.bind="false"
checked.bind="booleanOption" mouseup.delegate="booleanBootstrapClicked($event)">False
</label>
<label class="btn btn-sm btn-default ${booleanOption ? 'active' : ''}">
<input type="radio" name="booleanOptions" model.bind="true" checked.bind="booleanOption" mouseup.delegate="booleanBootstrapClicked($event)">True
</label>
</div>
booleanOption = ${booleanOption}
</div>
<div class="row" id="logDiv">
</div>
</div>
</template>
Raw
app.js
export class App {
options = [
{ value: 1, text: 'Option 1' },
{ value: 2, text: 'Option 2' },
{ value: 3, text: 'Option 3' }
];
selectedOption = {};
textOptions = ['First Text Option', 'Second Text Option'];
selectedTextOption;
nonFancySelectedOption = {};
booleanOption;
log = '';
constructor() {
this.selectedOption = this.options[0];
this.nonFancySelectedOption = this.options[0];
this.booleanOption = false;
this.selectedTextOption = this.textOptions[0];
}
bootstrapClicked(evt) {
console.log('bootstrapClicked');
return true;
}
clicked(evt) {
console.log('regular clicked');
this.appendLog('regular clicked: ' + this.nonFancySelectedOption.text);
return true;
}
booleanBootstrapClicked(evt) {
this.appendLog('booleanBootstrapClicked');
}
appendLog(message) {
console.log(message);
let logDiv = document.getElementById("logDiv");
logDiv.innerText = logDiv.innerText + "\n" + message;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia Bootstrap Radio Button Group</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment