Skip to content

Instantly share code, notes, and snippets.

@Nepoxx

Nepoxx/app.html

Forked from jdanyow/app.html
Created September 30, 2016 17:59
Show Gist options
  • Save Nepoxx/7f5cc272d90638da5ee5ceddafcec2ee to your computer and use it in GitHub Desktop.
Save Nepoxx/7f5cc272d90638da5ee5ceddafcec2ee to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist
Raw
app.html
<template>
<require from="keys"></require>
<require from="stringTypeOf"></require>
<require from="titlerize"></require>
<form class="form-horizontal form-label-left input_mask">
<div class="form-group" repeat.for="key of data | keys">
Key: ${key}, Value: ${data[key]}
<br>
<label class="control-label col-md-3 col-sm-3 col-xs-12">Title: ${key | titlerize}</label>
<div class="col-md-9 col-sm-9 col-xs-12">
Compose:<compose view-model="${data[key] | stringTypeOf}-form"
view="${data[key] | stringTypeOf}-form.html"
model.bind="data[key]"></compose>
<br>
Direct:<input type="number" class="form-control" placeholder="0" min="0" value.bind="data[key]">
</div>
</div>
<div class="ln_solid"></div>
</form>
</template>
6
Raw
app.js
export class App {
data = {a: 5};
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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
keys.js
export class KeysValueConverter {
toView(object) {
return Object.keys(object);
}
}
Raw
number-form.html
<template>
<input type="number" class="form-control" placeholder="0" min="0" value.bind="model">
</template>
Raw
number-form.js
export class NumberForm {
activate(model) {
this.model = model;
}
}
Raw
stringTypeOf.js
export class StringTypeOfValueConverter {
toView(object) {
return typeof object;
}
}
Raw
titlerize.js
export class TitlerizeValueConverter {
toView(camelCaseString) {
const string = camelCaseString.replace(/([A-Z]+)/g, " $1");
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment