Skip to content

Instantly share code, notes, and snippets.

@Vallabharayudu

Vallabharayudu/app.html

Last active February 27, 2017 13:10
Show Gist options
  • Save Vallabharayudu/a3ba5df6cff8917b7e8490f09b2a4102 to your computer and use it in GitHub Desktop.
Save Vallabharayudu/a3ba5df6cff8917b7e8490f09b2a4102 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.html
<template>
<require from="./location-map"></require>
<div><h2>Play with variables from parent to child and vice versa</h2></div>
<location-map></location-map>
</template>
Raw
app.js
import { inject, BindingEngine} from 'aurelia-framework';
import {
ValidationControllerFactory,
ValidationController,
ValidationRules
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';
@inject(ValidationControllerFactory)
export class App {
dropdownAddress ="Dream orbit";
street1 = "17th c main";
street2 = 'Koramangala 5th block';
citystate ="bangalore, karnataka";
usethisaddress ='';
constructor(controllerFactory){
this.controller = controllerFactory.createForCurrentScope();
this.controller.addRenderer(new BootstrapFormRenderer());
this.controller.validate();
}
}
ValidationRules
.ensure(a => a.street1).required()
.ensure(a => a.street2).required()
.ensure(a => a.citystate).required()
.on(App);
Raw
bootstrap-form-renderer.js
import {
ValidationRenderer,
RenderInstruction,
ValidationError
} from 'aurelia-validation';
export class BootstrapFormRenderer {
render(instruction) {
for (let { error, elements } of instruction.unrender) {
for (let element of elements) {
this.remove(element, error);
}
}
for (let { error, elements } of instruction.render) {
for (let element of elements) {
this.add(element, error);
}
}
}
add(element, error) {
const formGroup = element.closest('.form-group');
if (!formGroup) {
return;
}
// add the has-error class to the enclosing form-group div
formGroup.classList.add('has-error');
// add help-block
const message = document.createElement('span');
message.className = 'help-block validation-message';
message.textContent = error.message;
message.id = `validation-message-${error.id}`;
formGroup.appendChild(message);
}
remove(element, error) {
const formGroup = element.closest('.form-group');
if (!formGroup) {
return;
}
// remove help-block
const message = formGroup.querySelector(`#validation-message-${error.id}`);
if (message) {
formGroup.removeChild(message);
// remove the has-error class from the enclosing form-group div
if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
formGroup.classList.remove('has-error');
}
}
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>custom Parent</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
registration-form {
display: block;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.has-error input{
border:1px solid red;
}
</style>
</head>
<body aurelia-app="main">
<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
location-map.html
<template>
<h4>By clicking use this button you will understand</h4>
<div>
<div class="form-group relative_position">
<input type="text" value.bind="NodeParent.dropdownAddress"/>
</div>
<div class="breakDownInfo">
<div class="form-group relative_position">
<label class="control-label" for="first">Street 1</label>
<input type="text" class="addLocMapDropField" maxlength="100" spellcheck="false" placeholder="Address Line 1" value.bind="NodeParent.street1 & validate" />
</div>
<div class="form-group">
<label class="control-label" for="first">Street 2</label>
<input type="text" maxlength="40" spellcheck="false" placeholder="Address Line 2" value.bind="NodeParent.street2 & validate" />
</div>
<div class="form-group">
<label class="control-label" for="first">City State</label>
<input type="text" placeholder="City/State" value.bind="NodeParent.citystate & validate"/>
</div>
</div>
<div class="form-group">
<div class="AddLocMapContainer">
<div id="mapHolder" class="AddLocationMap"></div>
</div>
</div>
<div class="form-group">
<input type="text" id="useThisAddress" value.bind="NodeParent.usethisaddress" class="UseThisInputField" readonly />
<button class="blueButton right useMapBtn" click.delegate="onclickusethisAddress()">Use This</button>
</div>
</div>
</template>
Raw
location-map.js
import { inject, BindingEngine} from 'aurelia-framework';
@inject(BindingEngine)
export class LocationMap{
NodeParent;
bindingEngine;
constructor(BindingEngine){
this.bindingEngine = BindingEngine;
}
onclickusethisAddress() {
var self = this;
self.NodeParent.dropdownAddress = 'Cap Gemini';
self.NodeParent.street1 = '18th c main';
self.NodeParent.street2 = '';
self.NodeParent.citystate ="bangalore, karnataka";
this.NodeParent.controller.validate();
self.NodeParent.usethisaddress =`${self.NodeParent.dropdownAddress}, ${self.NodeParent.street2},, ${self.NodeParent.citystate}`
}
bind(bindingContext, overrideContext) {
this.NodeParent = bindingContext;
}
}
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-validation');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment