Skip to content

Instantly share code, notes, and snippets.

@freshcutdevelopment

freshcutdevelopment/app.html

Last active January 11, 2020 10:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save freshcutdevelopment/4f2fc186e4cbda29a9ed67c9f603ac03 to your computer and use it in GitHub Desktop.
Save freshcutdevelopment/4f2fc186e4cbda29a9ed67c9f603ac03 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist - Dynamic composition (complete)
Raw
app.html
<template>
<require from="./au-form"></require>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>${message}</h1>
<hr/>
<compose view="info-card.html"></compose>
<hr/>
<div class="container">
<au-form></au-form>
</div>
</template>
Raw
app.js
import {bindable} from 'aurelia-framework';
export class App {
@bindable description = "In this example we create a form dynamically at run-time using a combination of dynamic-composition and the template repeater.";
constructor(){
this.message = 'Aurelia - Dynamic Composition';
}
}
Raw
au-checkbox.html
<template>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value.bind="field.value">
${field.name}
</label>
</div>
</template>
Raw
au-checkbox.js
export class AuCheckbox{
activate(model) {
this.field = model;
}
}
Raw
au-form.html
<template>
<form class="form card" submit.trigger="addBook()">
<div class="card-block">
<h4 class="card-title">Add book <i class="fa fa-book" aria-hidden="true"></i></h4>
<h6 class="card-subtitle mb-2 text-muted">add a book to your bookshelf</h6>
<hr/>
<div class="form-group">
<div repeat.for="field of fields">
<compose containerless view-model="./${field.controlType}"
model.bind="field">
</compose>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary col-sm-3 push-sm-9"
disabled.bind="fields[0].value.length == 0">
add
</button>
</div>
</div>
</template>
</template>
Raw
au-form.js
import {inject, bindable} from 'aurelia-framework';
export class AuForm{
constructor(){
this.fields = [
{name : "Title", value : "War and Peace", controlType: "au-text-box", placeholder:'Enter a title'},
{name : "Description", value : "A rather long book", controlType: "au-text-area"},
{name : "Read", value: true, controlType: "au-checkbox"}
];
}
addBook(){
alert(`book added with title ${this.fields[0].value} `);
}
}
Raw
au-text-area.html
<template>
<div class="form-group">
<label for="${field.name}">${field.name}</label>
<textarea class="form-control" id="${field.name}" rows="3" value.bind="field.value">
</textarea>
</div>
</template>
Raw
au-text-area.js
export class AuTextArea{
activate(model) {
this.field = model;
}
}
Raw
au-text-box.html
<template>
<div class="form-group">
<label for="${field.name}">${field.name}</label>
<input name="${field.name}"
class="form-control"
type="text"
placeholder="${field.placeholder}" value.bind="field.value">
</div>
</template>
Raw
au-text-box.js
export class AuTextBox{
activate(model) {
this.field = model;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/config.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
info-card.html
<template>
<section class="card info">
<p>
The <code>&lt;compose&gt;</code> element can be used to dynamically determine which component to load at run-time. This allows you to build truely flexible UIs.
</p>
<p>
${description}
</p>
</section>
</template>
Raw
main.js
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
Raw
style.css
section{
margin-left:10px;
margin-right:10px;
}
.card.info{
border-left:1px solid #70519E;
padding:20px;
border-left-width: .25rem;
border-radius: .25rem;
}
.notification {
bottom: 5px;
position: fixed;
right: 5px;
background-color:#0d904f;
color:white;
padding:20px;
width:300px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment