lstarky/app.html

## app.html
<template>

  <require from="./modal-form"></require>
  <h1>Aurelia Custom Element with Modal Form</h1>
  <button class="btn btn-success btn-large" click.delegate="openModal()">New Item</button>
  <button class="btn btn-primary btn-large" click.delegate="openModal(1)">Edit Item</button>
  <div class="form-group">
    <label for="my-input">#my-input</label>
    <input type="text" class="form-control" id="my-input">
  </div>

	<modal-form ref="edit_division" record_id.bind="division.div_id" title="${division.div_id ? 'Edit_Division' : 'New_Division'}" error.bind="error">

    <form>
    	<div class="form-group">
    		<label class="control-label" for="div_code">Division code</label>
    		<input type="text" class="form-control" ref="div_code" value.bind="division.div_code" />
    	</div>
    	<div class="form-group">
    		<label class="control-label" for="div_name">Division name</label>
    		<input type="text" class="form-control" value.bind="division.div_name">
    	</div>
    	<div class="form-group">
    		<label class="control-label" for="div_principal_p_id">Principal name</label>
    		<input type="text" class="form-control" value.bind="division.div_principal_name">
    	</div>
    </form>

	</modal-form>

</template>

## app.js
export class App {

  error = "";
  division = {
    div_id: 1,
    div_code: "S",
    div_name: "Secondary"
  };

	openModal(id) {
	  this.division.div_id = id;
	  if (id) {
	    this.error = "";
	  } else {
	    this.error = "Incomplete form...";
	  }
	  $("#my-input").val("JQuery is working" + Date.now());
		$(this.edit_division).find(".modal").modal();
	}

	saveRecord() {
	  window.alert("Save successful!");
	}

	deleteRecord() {
	  window.alert("Delete successful!");
	}

	closeModal() {
		$(this.edit_division).modal('hide');
	}
}

## 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.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  </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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## modal-form.html
<template>

	<!-- Modal edit window -->
	<div class="modal fade" tabindex="-1" role="dialog">
	<!--<div>-->
		<div class="modal-dialog" role="document">
			<div class="modal-content">

				<div class="modal-header modal-header-success">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
					<h4 class="modal-title">${title}</h4>
				</div>
				<div class="modal-body">

				 <div class="alert alert-danger" if.bind="error">${error}</div>

				<slot><!-- Custom element inner content will be inserted here --></slot>

				</div>
				<div class="modal-footer">
					 <button type="button" class="btn btn-danger pull-left" click.delegate="deleteRecord()" if.bind="record_id" tabindex=99>Delete</button>
					<button type="button" class="btn btn-secondary" click.delegate="closeModal()">Cancel</button>
					<button type="button" class="btn btn-primary" click.delegate="saveRecord()">Save</button>
				</div>
			</div>
		</div>
	</div>

</template>

## modal-form.js
import { bindable } from 'aurelia-framework';

export class ModalFormCustomElement {

	@bindable title;
	@bindable record_id;
	@bindable error;

	saveRecord() {
	  window.alert("SAVE: How do I call a function in the parent container?");
	}

	deleteRecord() {
	  window.alert("DELETE: How do I call a function in the parent container?");
	}

	closeModal() {
		$(".modal").modal('hide');
	}

}
	<template>

	<require from="./modal-form"></require>
	<h1>Aurelia Custom Element with Modal Form</h1>
	<button class="btn btn-success btn-large" click.delegate="openModal()">New Item</button>
	<button class="btn btn-primary btn-large" click.delegate="openModal(1)">Edit Item</button>
	<div class="form-group">
	<label for="my-input">#my-input</label>
	<input type="text" class="form-control" id="my-input">
	</div>

	<modal-form ref="edit_division" record_id.bind="division.div_id" title="${division.div_id ? 'Edit_Division' : 'New_Division'}" error.bind="error">

	<form>
	<div class="form-group">
	<label class="control-label" for="div_code">Division code</label>
	<input type="text" class="form-control" ref="div_code" value.bind="division.div_code" />
	</div>
	<div class="form-group">
	<label class="control-label" for="div_name">Division name</label>
	<input type="text" class="form-control" value.bind="division.div_name">
	</div>
	<div class="form-group">
	<label class="control-label" for="div_principal_p_id">Principal name</label>
	<input type="text" class="form-control" value.bind="division.div_principal_name">
	</div>
	</form>

	</modal-form>

	</template>
	export class App {

	error = "";
	division = {
	div_id: 1,
	div_code: "S",
	div_name: "Secondary"
	};

	openModal(id) {
	this.division.div_id = id;
	if (id) {
	this.error = "";
	} else {
	this.error = "Incomplete form...";
	}
	$("#my-input").val("JQuery is working" + Date.now());
	$(this.edit_division).find(".modal").modal();
	}

	saveRecord() {
	window.alert("Save successful!");
	}

	deleteRecord() {
	window.alert("Delete successful!");
	}

	closeModal() {
	$(this.edit_division).modal('hide');
	}
	}
	<!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.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
	</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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>

	<!-- Modal edit window -->
	<div class="modal fade" tabindex="-1" role="dialog">
	<!--<div>-->
	<div class="modal-dialog" role="document">
	<div class="modal-content">

	<div class="modal-header modal-header-success">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
	<h4 class="modal-title">${title}</h4>
	</div>
	<div class="modal-body">

	<div class="alert alert-danger" if.bind="error">${error}</div>

	<slot><!-- Custom element inner content will be inserted here --></slot>

	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-danger pull-left" click.delegate="deleteRecord()" if.bind="record_id" tabindex=99>Delete</button>
	<button type="button" class="btn btn-secondary" click.delegate="closeModal()">Cancel</button>
	<button type="button" class="btn btn-primary" click.delegate="saveRecord()">Save</button>
	</div>
	</div>
	</div>
	</div>

	</template>
	import { bindable } from 'aurelia-framework';

	export class ModalFormCustomElement {

	@bindable title;
	@bindable record_id;
	@bindable error;

	saveRecord() {
	window.alert("SAVE: How do I call a function in the parent container?");
	}

	deleteRecord() {
	window.alert("DELETE: How do I call a function in the parent container?");
	}

	closeModal() {
	$(".modal").modal('hide');
	}

	}