ziadloo · October 16, 2016 05:03
diff --git a/app.html b/app.html
 <template>
  <require from="./parent"></require>
  <require from="./child"></require>
  
  <parent rows.bind="users">
    <child slot="childComponent"></child>
  </parent>
  
  <input value.bind="users[0].name">
 </template>
diff --git a/app.js b/app.js
 export class App
 {
  users = [{name: "Joe"}, {name: "Jack"}, {name: "Jill"}];
 }
diff --git a/child.html b/child.html
 <template>
  <span>${name}</span>
 </template>
diff --git a/child.js b/child.js
 import { bindable } from 'aurelia-framework';

 export class Child
 {
  @bindable
  name = "** child's model is not set **";
 }
diff --git a/index.html b/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>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
 </html>
diff --git a/parent.html b/parent.html
 <template>
  The Parent
  <ul>
    <slot name="childComponent" model.bind="rows[0]"></slot>
  </ul>
 </template>
diff --git a/parent.js b/parent.js
 import { bindable } from 'aurelia-framework';

 export class Parent
 {
    @bindable
    rows = [{name: "John"}];
 }
diff --git a/script.js b/script.js
 console.log('Hello World!');
diff --git a/styles.css b/styles.css
 /* todo: add styles */
	<template>
	<require from="./parent"></require>
	<require from="./child"></require>

	<parent rows.bind="users">
	<child slot="childComponent"></child>
	</parent>

	<input value.bind="users[0].name">
	</template>
	export class App
	{
	users = [{name: "Joe"}, {name: "Jack"}, {name: "Jill"}];
	}
	import { bindable } from 'aurelia-framework';

	export class Child
	{
	@bindable
	name = " child's model is not set ";
	}
	<!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>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	The Parent
	<ul>
	<slot name="childComponent" model.bind="rows[0]"></slot>
	</ul>
	</template>
	import { bindable } from 'aurelia-framework';

	export class Parent
	{
	@bindable
	rows = [{name: "John"}];
	}