danghongthanh/app.html

## app.html
<template>
  <require from="nav-bar.html"></require>
  <require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>
  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host" style="margin-top:50px">
    <router-view></router-view>
  </div>
</template>

## app.js
export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'page1'], name: 'welcome',      moduleId: 'page1',      nav: true, title: 'Welcome' }
    ]);

    this.router = router;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
//import 'bootstrap';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

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

## my-element.html
<template>
  <div>This is the test element - is "choices" undefined: ${ valueIsUndefined }</div>
  <p repeat.for="choice of choices">Item ${$index}: </p>
  <input value.bind="myinput" />
</template>

## my-element.js
import {bindable} from 'aurelia-framework';

export class MyElement {
  @bindable choices = [];
  @bindable myinput = '';

  choicesChanged(newValue) {
    console.log('choicesChanged', newValue);

  }

  myinputChanged(newValue){
    console.log('choices in input', this.choices);
    this.choices.push(newValue);

  }
  attached(){
    if(!this.choices){
        this.choices = [];
      }
  }
}

## nav-bar.html
<template bindable="router">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

## page1.html
<template>
  <require from="my-element"></require>
  <section class="au-animate">
    <h2>Test Page</h2>
    <input type="checkbox" model.bind="row" matcher.bind="rowMatcher" checked.bind="selectedRows" />
    <my-element choices.two-way="form.choices"></my-element>
    <button click.delegate="printChoices()">printChoices</button>
  </section>
</template>

## page1.js
export class Page1 {
  form = {};
  row = {pro1: 'ABC', pro1: 'DEF'};
  selectedRows = [];
  checkable = {id: 'prop1'};

  rowMatcher = (rowA, rowB) => {
    console.log('this', this);
    return rowA[this.checkable.id] == rowB[this.checkable.id];
  }

  printChoices(){
    console.log('choices in page 1',this.form.choices);
  }
}

## script.js
console.log('Hello World!');

## styles.css
/* todo: add styles */
	<template>
	<require from="nav-bar.html"></require>
	<require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>
	<nav-bar router.bind="router"></nav-bar>

	<div class="page-host" style="margin-top:50px">
	<router-view></router-view>
	</div>
	</template>
	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map([
	{ route: ['', 'page1'], name: 'welcome', moduleId: 'page1', nav: true, title: 'Welcome' }
	]);

	this.router = router;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	//import 'bootstrap';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<div>This is the test element - is "choices" undefined: ${ valueIsUndefined }</div>
	<p repeat.for="choice of choices">Item ${$index}: </p>
	<input value.bind="myinput" />
	</template>
	import {bindable} from 'aurelia-framework';

	export class MyElement {
	@bindable choices = [];
	@bindable myinput = '';

	choicesChanged(newValue) {
	console.log('choicesChanged', newValue);

	}

	myinputChanged(newValue){
	console.log('choices in input', this.choices);
	this.choices.push(newValue);

	}
	attached(){
	if(!this.choices){
	this.choices = [];
	}
	}
	}
	<template>
	<require from="my-element"></require>
	<section class="au-animate">
	<h2>Test Page</h2>
	<input type="checkbox" model.bind="row" matcher.bind="rowMatcher" checked.bind="selectedRows" />
	<my-element choices.two-way="form.choices"></my-element>
	<button click.delegate="printChoices()">printChoices</button>
	</section>
	</template>
	export class Page1 {
	form = {};
	row = {pro1: 'ABC', pro1: 'DEF'};
	selectedRows = [];
	checkable = {id: 'prop1'};

	rowMatcher = (rowA, rowB) => {
	console.log('this', this);
	return rowA[this.checkable.id] == rowB[this.checkable.id];
	}

	printChoices(){
	console.log('choices in page 1',this.form.choices);
	}
	}