zhhz/app.html

## app.html
<template>
  <h1>from app tpl</h1>
  <router-view></router-view>
</template>

## app.js
export class App {
  constructor() {
  }

  configureRouter(config, router){
    this.router = router;
    config.map([{
      route: '', moduleId: 'router-levelone'
    }]);
  }
}

## 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');
      }
    }
  }
}

## 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/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body aurelia-app="main" class="container">
    <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>

## input-el.html
<template>
    <input type="text" value.bind="value">
</template>

## input-el.js
import {inject, bindable, bindingMode, customElement} from 'aurelia-framework';

@customElement('input-el')
@inject(Element)
export class InputEl {
    @bindable({defaultBindingMode: bindingMode.twoWay}) value;

    constructor(element) {
        this.element = element;
    }

}

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

  aurelia.start().then(() => aurelia.setRoot());
}

## my-renderer.js
export class MyRenderer {

    constructor() {
    }

    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) {
    console.log('got a element', elements);
                this.add(element, error);
            }
        }
    }

    add(element, error) {
        this._handleMessage(element, error.message);
    }

    remove(element, error) {
        this._handleMessage(element, error.message, false);
    }

    //=============================================================================

    /** @private */
    _handleMessage(element, msgKey, show = true) {
      console.log(msgKey);      
      console.log(element);
    }
}

## my-view.html
<template>
  <require from="./input-el"></require>

  <input-el value.bind="mymodel.tpl & validate"></input-el>

  <button type="submit" class="btn btn-primary" click.trigger="submit()">Submit</button>

</template>

## my-view.js
import {inject, NewInstance} from 'aurelia-framework';
import {ValidationController, ValidationRules} from 'aurelia-validation';
import {MyRenderer} from './my-renderer';

@inject(NewInstance.of(ValidationController))
export class MyView {
  mymodel = {
     tpl: ''
  };

  constructor(controller) {
    this.controller = controller;
    this.controller.addRenderer(new MyRenderer())
    this.setupValidation();
  }

  setupValidation() {
      ValidationRules.ensure('tpl')
      .required()
      .on(this.mymodel);
  }

  submit() {
    this.controller.validate().then(r => console.log(r));
  }
}

## router-levelone.html
<template>
  <h2>from level one </h2>
  <router-view></router-view>
</template>

## router-levelone.js
export class RouterLevelone {
  constructor() {
  }

  configureRouter(config, router){
    this.router = router;
    config.map([{
      route: '', moduleId: 'my-view'
    }]);
  }
}
	<template>
	<h1>from app tpl</h1>
	<router-view></router-view>
	</template>
	export class App {
	constructor() {
	}

	configureRouter(config, router){
	this.router = router;
	config.map([{
	route: '', moduleId: 'router-levelone'
	}]);
	}
	}
	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');
	}
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<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">
	</head>
	<body aurelia-app="main" class="container">
	<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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<require from="./input-el"></require>

	<input-el value.bind="mymodel.tpl & validate"></input-el>

	<button type="submit" class="btn btn-primary" click.trigger="submit()">Submit</button>

	</template>
	import {inject, NewInstance} from 'aurelia-framework';
	import {ValidationController, ValidationRules} from 'aurelia-validation';
	import {MyRenderer} from './my-renderer';

	@inject(NewInstance.of(ValidationController))
	export class MyView {
	mymodel = {
	tpl: ''
	};

	constructor(controller) {
	this.controller = controller;
	this.controller.addRenderer(new MyRenderer())
	this.setupValidation();
	}

	setupValidation() {
	ValidationRules.ensure('tpl')
	.required()
	.on(this.mymodel);
	}

	submit() {
	this.controller.validate().then(r => console.log(r));
	}
	}
	<template>
	<h2>from level one </h2>
	<router-view></router-view>
	</template>
	export class RouterLevelone {
	constructor() {
	}

	configureRouter(config, router){
	this.router = router;
	config.map([{
	route: '', moduleId: 'my-view'
	}]);
	}
	}